@font-face{font-family:"Fraunces";src:url(assets/fraunces.woff2) format("woff2");
           font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"DMSans";src:url(assets/dmsans.woff2) format("woff2");
           font-weight:100 1000;font-style:normal;font-display:swap}
/* Fraunces and DM Sans have no Cyrillic, so Russian gets matched substitutes.
   Golos Text is Cyrillic-first, so it reads native rather than bolted-on. */
@font-face{font-family:"Playfair";src:url(assets/playfair.woff2) format("woff2");
           font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Golos";src:url(assets/golos.woff2) format("woff2");
           font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --chalk:#E9E7DF;
  --chalk-deep:#DFDCD2;
  --ink:#171814;
  --ink-soft:#4A4E46;
  --ink-faint:#7C8179;
  --madder:#A33526;
  --sage:#8C9A8E;
  --teal:#1F5B55;
  --veil:rgba(233,231,223,.88);
  --rule:rgba(23,24,20,.14);
  --display:"Fraunces",Georgia,serif;
  --body:"DMSans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wonk:"WONK" 1;
  --display-track:-.025em;
  --pad:clamp(20px,5vw,56px);
}
/* Russian: substitute faces that actually carry Cyrillic */
html[lang="ru"]{
  --display:"Playfair",Georgia,serif;
  --body:"Golos","DMSans",-apple-system,"Segoe UI",sans-serif;
  --wonk:normal;
}
/* Chinese: measures are set in `ch`, which is the width of "0" — about half a
   Han glyph. Left unadjusted every column is half as wide as intended and the
   hero wraps to eight characters a line. CJK measures are therefore reset in
   `em`, where one unit is one character, and the display sizes come down:
   Han carries presence at a smaller size than Latin. */
/* Han text can break between any two characters, and `balance` happily splits a
   two-character word (证|据) to even the lines up. `pretty` respects the comma
   instead, so the headline breaks where the sentence does. */
html[lang="zh"] .hero h1{font-size:clamp(1.95rem,4vw,3.05rem);max-width:9em;
                         text-wrap:pretty}
html[lang="zh"] h2{font-size:clamp(1.5rem,2.7vw,2.15rem)}
html[lang="zh"] .sec-head h2,
html[lang="zh"] .tool-hero h1{max-width:15em}
html[lang="zh"] h3{font-size:clamp(1.05rem,1.7vw,1.3rem)}
html[lang="zh"] body{line-height:1.8}
html[lang="zh"] .lede,
html[lang="zh"] .about p,
html[lang="zh"] .inst p,
html[lang="zh"] .read p{max-width:34em}
html[lang="zh"] .bar-note{max-width:32em}
html[lang="zh"] .disc{max-width:44em}
html[lang="zh"] .foot .tag{max-width:24em}
/* keep the inline style attribute on .lede from re-imposing a ch measure */
html[lang="zh"] .sec > .lede[style]{max-width:34em}

html[lang="zh"]{
  --display:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",
            "Hiragino Sans GB",serif;
  --body:"PingFang SC","Noto Sans SC","Source Han Sans SC","Hiragino Sans GB",
         "Microsoft YaHei",sans-serif;
  --wonk:normal;
  --display-track:normal;   /* tight tracking damages Han glyphs */
}
*{box-sizing:border-box}
/* Anchor smoothing works with no JavaScript, so it survives on WordPress.
   The inertial easing below is a progressive enhancement on top of it. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
html.inertia-scroll{scroll-behavior:auto}
html.inertia-scroll #page{position:fixed;inset:0 0 auto;width:100%;
                          will-change:transform;backface-visibility:hidden}
body{margin:0;background:var(--chalk);color:var(--ink);font-family:var(--body);
     font-size:clamp(15.5px,1vw,17px);line-height:1.6;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--madder);outline-offset:4px}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.label{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
       color:var(--ink-faint)}
.serif{font-family:var(--display);font-variation-settings:var(--wonk)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(233,231,223,.92);
     backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
           flex-wrap:wrap;padding-block:14px}
/* wordmark stays Latin in every language: it is the brand, not copy */
.mark{font-family:"Fraunces",Georgia,serif;font-variation-settings:"WONK" 1;font-size:1.2rem;
      font-weight:600;letter-spacing:-.015em;text-decoration:none}
.mark span{font-weight:300;font-style:italic}
.top-right{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap}
.langs{display:flex;gap:11px;flex-wrap:wrap;align-items:baseline;
       padding-left:20px;border-left:1px solid var(--rule)}
.langs a,.langs .lang-cur{font-size:.76rem;letter-spacing:.03em;text-decoration:none}
.langs a{color:var(--ink-faint);border-bottom:1px solid transparent}
.langs a:hover{color:var(--ink);border-bottom-color:var(--madder)}
.langs .lang-cur{color:var(--madder);font-weight:600}
@media (max-width:700px){.langs{padding-left:0;border-left:0}}
.menu{display:flex;gap:20px;flex-wrap:wrap}
.menu a{text-decoration:none;font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft);
        padding-bottom:2px;border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--ink);border-bottom-color:var(--madder)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-variation-settings:var(--wonk);font-weight:400;
         letter-spacing:var(--display-track);text-wrap:balance;margin:0}
h1{font-size:clamp(2.3rem,5.4vw,4.15rem);line-height:1.03}
h2{font-size:clamp(1.7rem,3.3vw,2.65rem);line-height:1.09}
h3{font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.22;font-weight:600}
b,strong{font-weight:700}
em{font-style:italic;font-weight:300;color:var(--madder)}
/* Han characters have no true italic; a synthesised oblique is a typographic
   error, so emphasis in Chinese carries by colour alone. */
html[lang="zh"] em{font-style:normal;font-weight:inherit}
.lede{color:var(--ink-soft);max-width:56ch}

.sec{padding-block:clamp(62px,9vh,112px)}
.sec-head{margin-bottom:34px}
.sec-head h2{margin:14px 0 16px;max-width:21ch}

/* ---------- hero (platform) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero-net{position:absolute;inset:0;z-index:0;pointer-events:none;
          background:url(assets/network.svg) no-repeat right -6% center;
          background-size:auto 128%;opacity:.24}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
           background:linear-gradient(97deg,var(--chalk) 0%,rgba(233,231,223,.96) 32%,
                      rgba(233,231,223,.62) 62%,rgba(233,231,223,.30) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(64px,13vh,132px)}
/* 23ch keeps "epidemiological evidence" whole on its own line; the old 17ch was
   set for a headline made of short words and now breaks it mid-phrase */
.hero h1{margin:20px 0 0;max-width:23ch}
.hero .lede{margin-top:24px;font-size:clamp(1rem,1.3vw,1.15rem)}
/* standfirst: names the audience in full ink, then hands off to the lede that
   explains the site. Two paragraphs, so the line breaks where each language
   needs it to rather than at a hard-coded <br>. */
.hero .lede-lead{color:var(--ink);font-weight:600;margin-bottom:0}
.hero .lede-lead + .lede{margin-top:11px}
@media (max-width:820px){
  .hero-net{background-position:center;background-size:cover;opacity:.16}
  .hero-veil{background:linear-gradient(180deg,rgba(233,231,223,.72) 0%,var(--chalk) 78%)}
}
/* On a phone a single long word runs past the measure -- "эпидемиологические",
   "epidemiological". Hyphenation is confined to these widths so display type on
   a wide screen still sets unbroken. Han does not hyphenate. */
@media (max-width:560px){
  .hero h1{hyphens:auto}
  html[lang="zh"] .hero h1{hyphens:manual}
}

/* ---------- instruments rack ---------- */
.rack{display:grid;gap:0;border-top:1px solid var(--rule)}
.inst{border-bottom:1px solid var(--rule);padding-block:30px;display:grid;gap:16px}
@media (min-width:900px){
  .inst{grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
}
.inst-main{display:grid;gap:11px}
.inst-top{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.chip{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
      padding:4px 9px;border:1px solid currentColor;white-space:nowrap}
.chip.live{color:var(--madder)}
.chip.soon{color:var(--ink-faint)}
.inst h3{margin:0}
.inst p{margin:0;color:var(--ink-soft);max-width:56ch}
.inst-meta{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:.74rem;letter-spacing:.09em;
           text-transform:uppercase;color:var(--ink-faint);font-weight:600;
           font-variant-numeric:tabular-nums}
.inst-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.inst.is-soon .inst-main{opacity:.62}

/* thumbnail carries the network — the Explorer's signature, not the platform's */
.thumb{border:1px solid var(--rule);background:var(--chalk-deep) url(assets/network.svg)
       no-repeat center/cover;aspect-ratio:16/10;position:relative}
.thumb.blank{background-image:none;display:grid;place-items:center;color:var(--ink-faint);
             font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:13px 21px;
     font-weight:600;font-size:.92rem;border:1px solid var(--ink);
     transition:background .17s ease,color .17s ease,transform .17s ease}
.btn-solid{background:var(--ink);color:var(--chalk)}
.btn-solid:hover{background:var(--madder);border-color:var(--madder);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--madder);color:var(--madder)}

/* ---------- about strip ---------- */
.about{display:grid;gap:34px}
@media (min-width:900px){.about{grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}}
.about p{color:var(--ink-soft);margin:0 0 14px;max-width:56ch}
.creds{display:grid;border-top:1px solid var(--rule);margin:0}
.cred{padding-block:13px;border-bottom:1px solid var(--rule);display:grid;gap:3px}
.cred dd{margin:0}
.cred .r{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
         font-weight:600}
.cred .w{font-size:.92rem}
.inline-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.inline-links a{text-decoration:none;border:1px solid var(--rule);padding:8px 13px;
                font-size:.79rem;letter-spacing:.04em;
                transition:border-color .16s ease,color .16s ease}
.inline-links a:hover{border-color:var(--madder);color:var(--madder)}

/* ---------- notes ---------- */
.notes{border-top:1px solid var(--rule)}
.note{display:grid;gap:5px;padding-block:22px;border-bottom:1px solid var(--rule);
      text-decoration:none}
.note h3{font-weight:400}
.note:hover h3{color:var(--madder)}
.note .m{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
         font-weight:600}

/* ---------- figures / bars (explorer page) ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
      background:var(--rule);border:1px solid var(--rule);margin-top:30px}
.fig{background:var(--veil);padding:22px 20px}
.fig .v{font-family:var(--display);font-variation-settings:"WONK" 1;
        font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1;font-variant-numeric:tabular-nums;
        letter-spacing:-.02em}
.fig .k{margin-top:8px;font-size:.69rem;letter-spacing:.15em;text-transform:uppercase;
        color:var(--ink-faint);font-weight:600}
.bars{margin-top:36px;display:grid;gap:25px;max-width:640px}
.bar-row{display:grid;gap:9px}
.bar-head{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.bar-head b{font-weight:600}
.bar-head span{font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.bar{height:6px;background:var(--chalk-deep);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;display:block}
.bar.est i{background:var(--madder)}
.bar.sus i{background:repeating-linear-gradient(90deg,var(--sage) 0 5px,transparent 5px 10px)}
.bar-note{color:var(--ink-soft);font-size:.93rem;max-width:54ch;margin:0}

.reads{margin-top:26px;border-top:1px solid var(--rule)}
.read{padding-block:26px;border-bottom:1px solid var(--rule);display:grid;gap:11px}
@media (min-width:840px){.read{grid-template-columns:186px minmax(0,1fr);gap:30px;align-items:start}}
.read .tag{color:var(--madder);font-size:.69rem;letter-spacing:.15em;text-transform:uppercase;
           font-weight:600;padding-top:5px}
.read h3{margin:0 0 8px}
.read p{margin:0;color:var(--ink-soft);max-width:58ch}

.legend{margin-top:32px;display:flex;gap:24px;flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:9px;font-size:.77rem;color:var(--ink-soft)}
.leg i{width:26px;height:0;display:block}
.leg.est i{border-top:2px solid var(--madder)}
.leg.sus i{border-top:1px dashed var(--sage)}
.leg.can i{width:9px;height:9px;border-radius:50%;background:var(--teal)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--chalk)}
.foot .wrap{padding-block:50px 38px}
.foot .mark{color:var(--chalk);font-size:1.45rem}
.foot .tag{color:#A7ADA2;margin:8px 0 0;max-width:42ch}
.foot .menu a{color:#A7ADA2}
.foot .menu a:hover{color:var(--chalk);border-bottom-color:var(--chalk)}
.foot-row{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:baseline}
.disc{margin-top:34px;border:1px solid rgba(233,231,223,.2);padding:18px 20px;color:#A7ADA2;
      font-size:.86rem;max-width:80ch}
/* affiliation notice reads as a formal aside, quieter than the health disclaimer */
.disc.affil{margin-top:12px;border-color:rgba(233,231,223,.12);color:#949A90;font-size:.8rem}
.creds a,.disc a{color:inherit;text-decoration:underline;text-underline-offset:2px;
                 text-decoration-color:rgba(163,53,38,.55)}
.creds a:hover,.disc a:hover{color:var(--madder);text-decoration-color:var(--madder)}
.foot .disc a{text-decoration-color:rgba(233,231,223,.4)}
.foot .disc a:hover{color:var(--chalk);text-decoration-color:var(--chalk)}
.foot-bot{margin-top:32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
          font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8A9086}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn-solid:hover{transition:none;transform:none}
}