/* ViraLens — a data essay. One reading column in a serif, a heavy condensed headline, ViraLens red,
   one chart that stays on screen and changes as the reader scrolls, footnotes at the end. */
html[data-theme="light"] .mk.p-vl{--bg:#f7f6f4;--bg2:#eeece8;--fg:#17141a;--fg2:#4b4549;--fg3:#7e767a;--line:#dedad8;--red:#d92b45;--redtx:#bf2139;--grey:#9aa3b2;--paper:#fff;color-scheme:light}
html[data-theme="dark"] .mk.p-vl{--bg:#131114;--bg2:#1c191d;--fg:#f2eded;--fg2:#bfb6b8;--fg3:#8f8689;--line:#2e292c;--red:#ff5f76;--redtx:#ff7d90;--grey:#6c7586;--paper:#1c191d;color-scheme:dark}
.p-vl{--disp:"Archivo","Noto Sans SC",sans-serif;--serif:"Source Serif 4","Noto Serif SC",serif;--col:680px}
.p-vl .pb{background:var(--fg);color:var(--bg);border:1px solid var(--fg)}
@media (hover:hover){.p-vl .pb:hover{background:var(--red);border-color:var(--red);color:#fff}}

.ve{padding:72px var(--px) 40px}
.ve-head,.ve-col{max-width:var(--col);margin:0 auto}
.ve-head{padding-bottom:56px}
.ve-kick{display:block;font:600 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--redtx)}
.ve-h1{font:850 76px/.98 var(--disp);font-stretch:70%;letter-spacing:-.015em;margin-top:28px}
.ve-h1 .zh{font:900 60px/1.2 "Archivo","Noto Sans SC",sans-serif;letter-spacing:.01em}
.ve-dek{font:italic 400 23px/1.55 var(--serif);color:var(--fg2);margin-top:28px!important}
.ve-dek .zh{font-style:normal;font-size:20px;line-height:1.8}
.ve-by{margin-top:28px!important;padding-top:16px;border-top:1px solid var(--line);font:500 14px/1.6 var(--f-ui);color:var(--fg3)}

.ve-p{font:400 20px/1.8 var(--serif);color:var(--fg);margin:0 0 26px!important;text-wrap:pretty;hanging-punctuation:first}
.ve-p .zh{font-size:18.5px;line-height:2}
.ve-p.drop>span{display:block}
.ve-p.drop .en::first-letter,.ve-p.drop .zh::first-letter{float:left;font:850 92px/.82 var(--disp);font-stretch:70%;color:var(--red);margin:6px 12px 0 0}
.ve-p.drop .zh::first-letter{font:900 70px/1 "Archivo","Noto Sans SC",sans-serif;margin:4px 12px 0 0}
.fn{font:600 12px/1 var(--f-mono);margin-left:2px}
.fn a{color:var(--redtx);text-decoration:none;padding:0 2px}
.ve-big{font:850 50px/1.05 var(--disp);font-stretch:72%;margin:64px 0 36px!important;color:var(--fg)}
.ve-big .zh{font:900 40px/1.3 "Archivo","Noto Sans SC",sans-serif}
.ve-h2{font:850 40px/1.05 var(--disp);font-stretch:72%;margin:72px 0 22px}
.ve-h2 .zh{font:900 32px/1.3 "Archivo","Noto Sans SC",sans-serif}
.ve-quote{margin:40px 0 44px;padding:0 0 0 24px;border-left:4px solid var(--red);font:italic 500 30px/1.35 var(--serif);color:var(--fg)}
.ve-quote .zh{font:600 26px/1.55 "Source Serif 4","Noto Serif SC",serif;font-style:normal}

/* scrolly: the chart stays put while the four steps scroll past */
.ve-scrolly{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;max-width:1180px;margin:24px auto 56px;position:relative}
.ve-sticky{position:sticky;top:96px;align-self:start;height:calc(100vh - 140px);max-height:620px;display:flex;align-items:center;margin:0}
.ve-fig{width:100%;background:var(--paper);border:1px solid var(--line);padding:22px 22px 16px}
.ve-fig figcaption{font-size:13.5px;line-height:1.55;color:var(--fg3);margin-top:10px}
.ve-steps{padding:30vh 0 40vh}
.ve-step{min-height:62vh;display:flex;align-items:center}
.ve-step p{font:400 20px/1.7 var(--serif);background:var(--bg);border-left:3px solid var(--line);padding:4px 0 4px 20px;transition:border-color .3s,color .3s;color:var(--fg2)}
.ve-step p .zh{font-size:18.5px;line-height:1.9}
.ve-step.cur p{border-left-color:var(--red);color:var(--fg)}
.vy{width:100%;height:auto;display:block;font-family:var(--f-ui)}
.vy .gl{stroke:var(--line)}
.vy .base{stroke:var(--fg);stroke-width:1.5;stroke-dasharray:5 4}
.vy .tk{fill:var(--fg3);font-size:13px;text-anchor:end}
.vy .bn{fill:var(--fg2);font-size:13px;text-anchor:middle}
.vy .bv{font-size:14px;font-weight:700;text-anchor:middle}
.vy .b rect{transform-box:fill-box;transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .5s}
.vy .b-k rect{fill:var(--red);transform-origin:50% 100%}.vy .b-k .bv{fill:var(--redtx)}
.vy .b-o rect{fill:var(--grey);transform-origin:50% 0}.vy .b-o .bv{fill:var(--fg2)}
.vy .b text{transition:opacity .4s .3s}
.vy .stamp-s rect{fill:none;stroke-width:3;transition:stroke .3s}
.vy .stamp-s text{font-size:20px;font-weight:800;text-anchor:middle;letter-spacing:.06em;transition:opacity .3s}
.vy .stamp-s{transform-box:fill-box;transform-origin:center;transform:rotate(-6deg);transition:opacity .4s,transform .4s cubic-bezier(.3,1.6,.5,1)}
/* states */
[data-at="1"] .vy .b-o rect,[data-at="2"] .vy .b-o rect{transform:scaleY(0)}
[data-at="1"] .vy .b-o text,[data-at="2"] .vy .b-o text{opacity:0}
[data-at="1"] .vy .stamp-s{opacity:0;transform:rotate(-14deg) scale(1.4)}
.vy .stamp-s rect{stroke:var(--fg)}.vy .stamp-s .s1{fill:var(--fg)}.vy .stamp-s .s2{fill:var(--redtx);opacity:0}
[data-at="3"] .vy .stamp-s{opacity:.25}
[data-at="4"] .vy .stamp-s rect{stroke:var(--red)}[data-at="4"] .vy .stamp-s .s1{opacity:0}[data-at="4"] .vy .stamp-s .s2{opacity:1}
[data-at="4"] .vy .b-k rect{opacity:.55}

/* wide figure */
.p6 .ve-wide{max-width:1040px;margin:24px auto 56px}
.ve-wide figcaption{max-width:var(--col);margin:12px auto 0;font-size:14px;line-height:1.6;color:var(--fg3)}
.ve-wide .ve-fig{padding:18px 18px 10px}
.vf{width:100%;height:auto;display:block;font-family:var(--f-ui)}
.vf .gl{stroke:var(--line)}
.vf .zl{stroke:var(--line);stroke-width:1}
.vf .tk2{fill:var(--fg3);font-size:13px;text-anchor:middle}
.vf .zn{fill:var(--fg);font-size:15px;font-weight:600;text-anchor:end}
.vf .dv{fill:var(--fg2);font-size:13px;font-weight:600}
.vf .dot{stroke:var(--paper);stroke-width:2;fill-opacity:.9}
.vf .d-kn{fill:#2bb3c9}.vf .d-te{fill:#8b7cf0}.vf .d-li{fill:#2ea86c}.vf .d-fo{fill:#e79a2f}.vf .d-ga{fill:#e0609a}.vf .d-yt{fill:var(--red)}

/* tricks: one dot per creator, up or down */
.ve-tricks{max-width:900px;margin:8px auto 48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tr{background:var(--paper);border:1px solid var(--line);padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px}
.tr h4{margin:0;font:700 15px/1.3 var(--f-ui)}
.trd{display:flex;flex-wrap:wrap;gap:5px}
.trd i{width:13px;height:13px;border-radius:50%;display:block}
.trd .u{background:var(--red)}.trd .d{background:var(--grey)}
.tr p{font-size:13.5px;color:var(--fg3);line-height:1.5}
.tr-big{font:850 30px/1 var(--disp)!important;font-stretch:80%;color:var(--fg)!important}

/* note, ways, footnotes */
.ve-note{margin:56px 0 0;padding:22px 24px;background:var(--bg2);border-top:3px solid var(--fg)}
.ve-note-k{display:block;font:600 12.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:10px}
.ve-note .todo{font:italic 400 17px/1.7 var(--serif);color:var(--fg3)}
.ve-ways{display:flex;flex-direction:column;border-top:1px solid var(--line);margin:8px 0 28px}
.ve-ways li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.ve-ways b{font:700 16px/1.5 var(--f-ui)}
.ve-ways span{font:400 16px/1.7 var(--serif);color:var(--fg2)}
.ve-ways a,.ve-ways .cp{grid-column:2;justify-self:start}
.ve-ways a{font:600 15px/1 var(--f-ui);color:var(--redtx);text-decoration:none;padding:6px 0}
.ve-ways .cp code{font-size:13.5px}
.ve-btns{margin-bottom:64px}
.ve-fns{border-top:1px solid var(--fg);padding-top:20px}
.ve-fns-h{font:600 13px/1 var(--f-mono)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:16px!important}
.p6 .ve-fns ol{list-style:decimal;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.ve-fns li{font:400 15px/1.7 var(--serif);color:var(--fg2);padding-left:6px}
.ve-fns li::marker{font:600 13px var(--f-mono);color:var(--redtx)}
.ve-fns li:target{background:color-mix(in srgb,var(--red) 10%,transparent)}
.p-vl .next b{font:850 44px/1 var(--disp);font-stretch:70%}

@media (max-width:899px){
  .ve{padding-top:32px}
  .ve-h1{font-size:50px}.ve-h1 .zh{font-size:38px}
  .ve-dek{font-size:19px}.ve-dek .zh{font-size:17px}
  .ve-p{font-size:18px}.ve-p .zh{font-size:17px}
  .ve-big{font-size:36px}.ve-big .zh{font-size:30px}
  .ve-quote{font-size:23px}.ve-quote .zh{font-size:21px}
  .ve-scrolly{grid-template-columns:minmax(0,1fr);gap:0;margin:16px 0 40px}
  .ve-sticky{top:64px;height:auto;max-height:none;z-index:1}
  .ve-fig{padding:12px 10px 10px}
  .ve-sticky figcaption{font-size:12px;line-height:1.45;margin-top:6px}
  .ve-steps{padding:24vh 0 30vh;position:relative;z-index:2}
  .ve-step{min-height:72vh;align-items:flex-end}
  .ve-step p{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--red);padding:14px 16px;font-size:17px;box-shadow:0 10px 30px -14px rgba(0,0,0,.35)}
  .ve-step p .zh{font-size:16px}
  .ve-tricks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ve-ways li{grid-template-columns:minmax(0,1fr)}
  .ve-ways a,.ve-ways .cp{grid-column:1}
  .ve-wide{overflow-x:auto}
  .vf{min-width:620px}
}