/* 100twt — a data piece on Twitter's top 100, 2009 */
:root{
  --paper:#f5f2eb; --paper-2:#ece7dc; --ink:#17191e; --ink-2:#4f525a; --ink-3:#85878c;
  --rule:#d6cfc1; --sky:#1b9fd6;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:40rem; --wide:70rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121418; --paper-2:#1a1d22; --ink:#ece8df; --ink-2:#aba79e; --ink-3:#76736d;
    --rule:#2c3036; --sky:#33ccff; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121418; --paper-2:#1a1d22; --ink:#ece8df; --ink-2:#aba79e; --ink-3:#76736d;
  --rule:#2c3036; --sky:#33ccff; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:1.125rem;line-height:1.6;font-optical-sizing:auto;overflow-x:hidden}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9}
.skip:focus{left:16px}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 16px}
@media (min-width:760px){.wrap{padding:0 32px}}
.mono,.kicker,.num{font-family:var(--mono)}
.kicker{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .6rem}

/* masthead */
.mast{border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.5rem;padding-top:14px;padding-bottom:14px}
.mark{font-family:var(--mono);font-weight:600;font-size:1rem;text-decoration:none;letter-spacing:-.02em}
.mark span{color:var(--ink-3);font-weight:400}
.nav{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-family:var(--mono);font-size:.78rem}
.nav a{text-decoration:none;color:var(--ink-2);padding:2px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* headline */
.head{padding:56px 0 28px}
@media (min-width:760px){.head{padding:88px 0 40px}}
.head h1{font-weight:500;font-size:clamp(2.1rem,5.6vw,4.3rem);line-height:1.04;letter-spacing:-.015em;margin:0;max-width:19ch}
.head.page h1{font-size:clamp(1.9rem,4.4vw,3.2rem);max-width:22ch}
.lede{font-size:1.25rem;line-height:1.5;color:var(--ink-2);max-width:var(--measure);margin:1.4rem 0 0}

/* snapshot strip */
.snaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 20px;margin:8px 0 0;padding:0;list-style:none}
.snaps li{border-top:2px solid var(--ink);padding-top:10px}
.snaps .d{font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.snaps .big{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;line-height:1.2;margin:.3rem 0 .1rem}
.snaps .s{font-size:.95rem;color:var(--ink-2);line-height:1.4}

/* sections */
.sec{padding:48px 0;border-top:1px solid var(--rule)}
.sec-head{display:grid;gap:12px;margin-bottom:28px}
@media (min-width:900px){.sec-head{grid-template-columns:1fr 1.2fr;gap:48px;align-items:end}}
.sec h2{font-weight:500;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;margin:0}
.sec-head p{margin:0;color:var(--ink-2);max-width:var(--measure)}

/* charts */
.chart{margin:0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart figcaption{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);margin-top:12px;max-width:var(--measure);line-height:1.5}
.ax{stroke:var(--rule);stroke-width:1}
.lbl{font-family:var(--mono);font-size:11px;fill:var(--ink-2)}
.lbl.b{fill:var(--ink);font-weight:600}
.ln{stroke:var(--ink-3);stroke-width:1.2;fill:none;opacity:.65}
.ln.hi{stroke:var(--sky);stroke-width:2.2;opacity:1}
.dot{fill:var(--ink)}
.dot.hi{fill:var(--sky)}
.dot.soft{fill:var(--ink);opacity:.45}
.bar{fill:var(--ink)}
.slope-wrap{max-width:760px}
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart-scroll svg{min-width:620px}

/* data table */
.table-tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:.74rem;color:var(--ink-2);margin-bottom:10px}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
table.data{border-collapse:collapse;width:100%;min-width:760px;font-family:var(--mono);font-size:.8rem;font-variant-numeric:tabular-nums}
.data th,.data td{padding:9px 10px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap;vertical-align:middle}
.data th{font-weight:600;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);vertical-align:bottom}
.data th:first-child,.data td:first-child{text-align:left;position:sticky;left:0;background:var(--paper);z-index:1}
.data th button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.data th button::after{content:"↕";opacity:.35}
.data th[aria-sort="ascending"] button::after{content:"↑";opacity:1}
.data th[aria-sort="descending"] button::after{content:"↓";opacity:1}
.data th[aria-sort] {color:var(--ink)}
.data td .r{display:block;font-size:.68rem;color:var(--ink-3)}
.data td.h{font-weight:600}
.data td.nil{color:var(--ink-3)}
.data tbody tr:hover td{background:var(--paper-2)}
.spark{width:84px;height:26px;display:block;margin-left:auto}
.spark .ln{opacity:1;stroke:var(--ink-2)}

/* quotes */
.quotes{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0}
.quotes figure{margin:0;border-top:1px solid var(--ink);padding-top:14px}
.quotes blockquote{margin:0;font-size:1.2rem;font-style:italic;line-height:1.45}
.quotes figcaption{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);margin-top:10px}

/* prose */
.body{padding:8px 0 64px}
.cols{display:grid;gap:40px}
@media (min-width:960px){.cols{grid-template-columns:minmax(0,var(--measure)) 1fr;gap:64px}}
.prose{max-width:var(--measure)}
.prose h2{font-weight:500;font-size:1.6rem;line-height:1.2;margin:2.4rem 0 .6rem}
.prose h3{font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;margin:2rem 0 .4rem;color:var(--ink-2)}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1.1rem}
.prose li{margin:.3rem 0}
.capture{margin:1.6rem 0 2rem;padding:18px 0 4px;border-top:1px dashed var(--ink-3);border-bottom:1px dashed var(--ink-3)}
.capture .tag{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);margin:0 0 .7rem;display:flex;flex-wrap:wrap;gap:4px 14px}
.capture p{font-size:1.15rem}
.capture .tweet{font-size:1.35rem;line-height:1.4}
.capture .who{font-family:var(--mono);font-weight:600;font-size:.95rem;font-style:normal}

/* side facts */
.facts{font-family:var(--mono);font-size:.8rem;border-top:2px solid var(--ink);padding-top:12px;align-self:start}
@media (min-width:960px){.facts{position:sticky;top:24px}}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.facts dt{color:var(--ink-2)}
.facts dd{margin:0;text-align:right}
.facts h2{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;font-weight:600}
.facts .list{list-style:none;margin:18px 0 0;padding:12px 0 0;border-top:1px solid var(--rule)}
.facts .list li{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.facts .list span{color:var(--ink-2)}

/* cards & lists */
.cards{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));border-top:2px solid var(--ink)}
.card{display:block;text-decoration:none;padding:18px 18px 22px 0;border-bottom:1px solid var(--rule)}
.card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.card .k{font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
.card h3{font-weight:500;font-size:1.3rem;line-height:1.25;margin:.35rem 0 .4rem}
.card p{margin:0;font-size:1rem;color:var(--ink-2)}
.prose .timeline,.timeline{list-style:none;padding:0;margin:1rem 0 2rem;border-left:1px solid var(--ink)}
.timeline li{position:relative;padding:0 0 1.1rem 20px}
.timeline li::before{content:"";position:absolute;left:-4px;top:.55em;width:7px;height:7px;background:var(--ink);border-radius:50%}
.timeline .when{display:block;font-family:var(--mono);font-size:.74rem;color:var(--ink-2)}
.az{columns:2 220px;column-gap:40px;list-style:none;padding:0;margin:0}
.az li{break-inside:avoid;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:.82rem}
.az .seen{display:inline-flex;gap:3px}
.az .seen i{width:9px;height:9px;border:1px solid var(--ink-2);border-radius:50%;display:inline-block}
.az .seen i.on{background:var(--ink);border-color:var(--ink)}
.az small{color:var(--ink-3);font-size:.7rem}
.index-list{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.index-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.index-list span{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);white-space:nowrap}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2.5rem;border-top:1px solid var(--rule);padding-top:14px;font-size:1rem}
.prevnext a{text-decoration:none}
.prevnext small{display:block;font-family:var(--mono);font-size:.7rem;color:var(--ink-2)}
.prevnext a:last-child{text-align:right}

/* search */
.find .wrap{display:grid;gap:16px}
@media (min-width:900px){.find .wrap{grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}}
#search{--pagefind-ui-scale:.9;--pagefind-ui-primary:var(--ink);--pagefind-ui-text:var(--ink);
  --pagefind-ui-background:var(--paper);--pagefind-ui-border:var(--ink-3);--pagefind-ui-tag:var(--paper-2);
  --pagefind-ui-border-width:1px;--pagefind-ui-border-radius:0;--pagefind-ui-image-border-radius:0;
  --pagefind-ui-font:var(--mono)}
#search .pagefind-ui__result-link{font-family:var(--serif);font-size:1.1rem}

/* footer */
.foot{border-top:2px solid var(--ink);margin-top:24px;padding:28px 0 48px;font-size:.92rem;color:var(--ink-2)}
.foot .wrap{display:grid;gap:24px}
@media (min-width:860px){.foot .wrap{grid-template-columns:1.4fr 1fr;gap:56px}}
.foot p{margin:0 0 .7rem;max-width:var(--measure)}
.foot nav{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-family:var(--mono);font-size:.78rem;align-content:start}
.foot nav a{text-decoration:none}
.foot nav a:hover{text-decoration:underline}