/* 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); }
@media (max-width: 900px) { .bar nav { 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); }

/* --- 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; }

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 24px; }
.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 2022 record figure ══════════════════════════════════════════════ */

.record-fig { margin: 46px 0 0; padding: 0; border: 1px solid var(--line);
  border-radius: 4px; background: var(--void); overflow: hidden; }
.record-fig figcaption { padding: 22px 24px 4px; display: grid; gap: 6px; }
.rf-t { font-weight: 600; font-size: 15.5px; }
.rf-s { font-size: 13px; color: var(--dim); max-width: 72ch; line-height: 1.5; }
.rf-plot { position: relative; height: 190px; margin: 16px 24px 0;
  border-bottom: 1px solid var(--line-2); }
/* The zero line: the day itself. Everything to the left of it is warning. */
.rf-plot::after { content: ""; position: absolute; right: 0; top: 0; bottom: -1px;
  width: 1px; background: var(--l4); opacity: .55; }
.rf-mark { position: absolute; bottom: 0; width: 7px; border-radius: 1px 1px 0 0;
  background: var(--c, var(--blind)); transform-origin: bottom; transform: scaleY(0);
  cursor: pointer; }
.rf-mark:hover, .rf-mark.on { filter: brightness(1.4); }
.rf-mark.k2 { --c: var(--l2); }
.rf-mark.k3 { --c: var(--l3); }
.rf-mark.k4 { --c: var(--l4); }
.rf-axis { position: relative; height: 26px; margin: 0 24px; }
.rf-axis span { position: absolute; transform: translateX(-50%); top: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--dim); }
.rf-read { margin: 0; padding: 12px 24px 20px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); min-height: 54px; }
.rf-read b { color: var(--text); font-weight: 600; }
.rf-read .rf-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; }
@media (max-width: 700px) { .rf-plot { height: 140px; } }

/* The three numbers the section quotes, drawn onto the figure. Without them
   the plot and the cards below are two separate claims; with them they are
   one. */
.rf-guide { position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--line-2); }
.rf-guide::after { content: attr(data-l); position: absolute; top: 4px; left: 5px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--dim);
  white-space: nowrap; }
/* First and last axis labels sit inside the frame instead of hanging off it. */
.rf-axis span:first-child { transform: none; }
.rf-axis span:last-child { transform: translateX(-100%); }

/* ══ 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 record figure, made readable ════════════════════════════════════ */

.case .record-fig { position: relative; }
/* A still of the same projection, darkened almost to nothing. A map rather
   than a photograph: licence-clean, no third-party request, and it does not
   use a war photograph to sell a subscription. */
.case .record-fig::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("region-still.svg") center/cover no-repeat;
  opacity: .22; mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
.record-fig > * { position: relative; }
.rf-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.rf-key span { display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); }
.rf-key i { width: 4px; height: 13px; border-radius: 1px; display: block; }
.rf-key .k2 i { background: var(--l2); }
.rf-key .k3 i { background: var(--l3); }
.rf-key .k4 i { background: var(--l4); }
.rf-mark { width: 6px; }
.rf-mark.sel { outline: 1px solid var(--text); outline-offset: 1px; }
/* Callouts on the three moments the section is about, so the chart reads
   without hovering anything. */
.rf-calls { position: relative; height: 62px; margin: 22px 24px 0; }
.rf-call { position: absolute; bottom: 0; transform: translateX(-50%);
  pointer-events: none; text-align: center; }
.rf-call b { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; color: var(--text); }
.rf-call span { display: block; font-size: 11px; color: var(--dim);
  max-width: 128px; margin-top: 2px; line-height: 1.35; }
.rf-call::after { content: ""; display: block; width: 1px; height: 10px;
  background: var(--line-2); margin: 5px auto 0; }
.rf-plot { height: 210px; margin-top: 0; }
.rf-read .rf-k.k2 { color: var(--l2); }
.rf-read .rf-k.k3 { color: var(--l3); }
.rf-read .rf-k.k4 { color: var(--l4); }