@font-face{font-family:'Archivo';src:url(../fonts/archivo.ttf) format('truetype');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(../fonts/plexmono-reg.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(../fonts/plexmono-med.ttf) format('truetype');font-weight:600;font-display:swap}

:root{
  --bg:#F4F2EC; --bg-raised:#EDEAE1; --card:#FAF8F3;
  --ink:#1B1A17; --ink-soft:#57534A; --ink-faint:#8A8474;
  --line:#D8D3C5; --line-soft:#E5E1D6;
  /* rust was #C0491A, which lands at 4.46:1 on this background and so misses the 4.5
     WCAG AA floor for the small uppercase type it is used on (badges, year headers,
     the project/code/video links). Darkened just enough to clear it: 4.99:1. */
  --rust:#B44317; --steel:#2F5E82; --on-accent:#FFFFFF;
  --fig:#FFFFFF;   /* mat behind a figure: the figures are drawn on white */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16150F; --bg-raised:#1D1B15; --card:#1B1913;
  --ink:#EDE9DF; --ink-soft:#B2AB9A; --ink-faint:#7A7260;
  --line:#332F26; --line-soft:#282419;
  --rust:#E8763F; --steel:#83B3D6; --on-accent:#16150F;
  --fig:#FFFFFF;
}}
:root[data-theme="dark"]{
  --bg:#16150F; --bg-raised:#1D1B15; --card:#1B1913;
  --ink:#EDE9DF; --ink-soft:#B2AB9A; --ink-faint:#7A7260;
  --line:#332F26; --line-soft:#282419;
  --rust:#E8763F; --steel:#83B3D6; --on-accent:#16150F;
  --fig:#FFFFFF;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;line-height:1.58;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--steel);text-underline-offset:2px}
a:hover{color:var(--rust)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--rust);outline-offset:3px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
.shell{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4.5vw,60px)}

/* the header is sticky, so an anchor would otherwise land underneath it.
   Publications stacks a second sticky bar (the filters) and needs more. */
[id]{scroll-margin-top:74px}
html[data-page="publications"] [id]{scroll-margin-top:118px}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--rust);
  color:var(--on-accent);padding:10px 16px;font-family:'Plex Mono',monospace;
  font-size:.78rem;text-decoration:none}
.skip:focus{left:0}

@media print{
  .topbar,.skip,.filters,footer .flinks{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;word-break:break-all}
  body{background:#fff;color:#000}
  section{page-break-inside:avoid;border-bottom:none}
}
.mono{font-family:'Plex Mono',ui-monospace,monospace}
.label{font-family:'Plex Mono',monospace;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600}

/* nav */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px clamp(20px,4.5vw,60px)}
.brand{font-family:'Plex Mono',monospace;font-weight:600;font-size:.84rem;color:var(--ink);text-decoration:none}
.brand b{color:var(--rust)}
.nav{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{font-family:'Plex Mono',monospace;font-size:.73rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--rust)}
.tbtn{font-family:'Plex Mono',monospace;font-size:.68rem;border:1px solid var(--line);
  background:transparent;color:var(--ink-soft);padding:5px 10px;border-radius:2px;cursor:pointer;white-space:nowrap}
.tbtn:hover{border-color:var(--rust);color:var(--rust)}
@media (max-width:980px){.nav{display:none}}

/* page head */
.phead{padding:44px 0 26px;border-bottom:1px solid var(--line)}
.phead h1{font-weight:800;font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.025em;line-height:1}
.phead .lede{margin-top:14px;color:var(--ink-soft);max-width:64ch}
html[data-page="publications"] .phead{border-bottom:none;padding-bottom:8px}
section{padding:44px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:none}
.sec-head{display:grid;grid-template-columns:200px 1fr;gap:30px;margin-bottom:24px;align-items:baseline}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;gap:6px}}
.sec-num{font-family:'Plex Mono',monospace;color:var(--ink-faint);font-size:.75rem}
.sec-head h2{font-size:1.55rem;font-weight:800;letter-spacing:-.018em}
.lead{color:var(--ink-soft);max-width:62ch;margin-bottom:20px}

/* home */
.hero{padding:52px 0 34px;border-bottom:1px solid var(--line)}
.hero h1{font-weight:800;font-size:clamp(2.2rem,5vw,3.5rem);letter-spacing:-.028em;line-height:1.02;max-width:20ch}
.hero .lede{margin-top:18px;font-size:1.08rem;color:var(--ink-soft);max-width:60ch}
.heropi{margin-top:14px;color:var(--ink-soft);font-size:.95rem;max-width:60ch}
.heropi a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rust)}
.more{margin-top:18px}
.recog{margin-top:16px;font-size:1rem;color:var(--ink-soft);line-height:1.7}
.recog b{font-family:'Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600;display:block;margin-bottom:2px}

/* selected work cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);display:flex;flex-direction:column}
.cfig{display:block;background:var(--fig);border-bottom:1px solid var(--line)}
.cfig img{width:100%;height:190px;object-fit:contain;display:block}
.cbody{padding:13px 15px 15px;display:flex;flex-direction:column;flex:1}
.cvenue{font-family:'Plex Mono',monospace;font-size:.68rem;color:var(--steel);
  letter-spacing:.03em}
.card h3{font-size:.96rem;font-weight:700;line-height:1.35;margin:7px 0 0;
  letter-spacing:-.005em}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--rust)}
.clinks{margin-top:auto;padding-top:11px;display:flex;gap:12px}
.clinks a{font-family:'Plex Mono',monospace;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--steel);text-decoration:none}
.clinks a:hover{color:var(--rust)}
.vfacade{position:relative}
.playbtn{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;background:color-mix(in srgb,var(--ink) 55%,transparent);
  border:2px solid var(--on-accent)}
.playbtn::after{content:"";position:absolute;top:50%;left:50%;margin:-9px 0 0 -6px;
  border-left:15px solid var(--on-accent);border-top:9px solid transparent;
  border-bottom:9px solid transparent}
.vfacade:hover .playbtn{background:var(--rust)}
.vnote{position:absolute;right:8px;bottom:8px;font-family:'Plex Mono',monospace;
  font-size:.64rem;letter-spacing:.04em;color:var(--on-accent);
  background:color-mix(in srgb,var(--ink) 62%,transparent);padding:3px 8px;border-radius:2px}
.vplayer{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}

/* group numbers and destinations */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);padding:16px 18px}
.stat .figure{display:block;font-family:'Plex Mono',monospace;font-size:1.6rem;
  font-weight:600;color:var(--rust);line-height:1}
.stat .label{display:block;margin-top:7px;font-size:.83rem;color:var(--ink-soft)}
.facerow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.facerow img{width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);display:block}
.facerow a:hover img{border-color:var(--rust)}
.yearnav{display:flex;gap:4px 12px;flex-wrap:wrap;margin-bottom:22px;
  font-family:'Plex Mono',monospace;font-size:.74rem}
.yearnav a{color:var(--ink-faint);text-decoration:none;padding:2px 0}
.yearnav a:hover{color:var(--rust)}
.jstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:22px}
@media (max-width:640px){.jstrip{grid-template-columns:repeat(2,1fr)}}
/* the cell has to take its shape from the pictures, not from the viewport: a fixed
   96px height against a fluid column width meant the cell aspect drifted with the
   window and every figure letterboxed by a different amount. All jstrip figures are
   cut to 3:2, so pinning the cell to 3:2 makes each one fill it at any width. */
.jstrip img{width:100%;aspect-ratio:3/2;height:auto;object-fit:contain;display:block;background:var(--fig)}
.ttag{font-family:'Plex Mono',monospace;font-size:.72rem;color:var(--steel);
  letter-spacing:.03em;margin:4px 0 10px}
.whycols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:860px){.whycols{grid-template-columns:1fr}}
.whycols p{color:var(--ink-soft);font-size:.93rem;line-height:1.62}
.whycols p::first-line{color:var(--ink)}
.roster{border:1px solid var(--line);background:var(--card);border-radius:2px;
  padding:4px 18px 14px}
.rrow{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:11px 0;
  border-top:1px solid var(--line-soft);align-items:baseline}
.rrow:first-child{border-top:none}
@media (max-width:700px){.rrow{grid-template-columns:1fr;gap:3px}}
.rrow b{font-family:'Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.rrow span{font-size:.9rem;color:var(--ink-soft);line-height:1.6}
.places{margin-top:20px;display:grid;gap:14px}
.pl{color:var(--ink-soft);font-size:.9rem;line-height:1.6;max-width:78ch}
.pl b{display:block;font-family:'Plex Mono',monospace;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:4px;font-weight:600}

/* research */
.thrusts{display:flex;flex-direction:column;gap:18px}
/* figure beside the text, not above it: three stacked full-width figures made
   the home page twice the length of everything else on it */
.thrust{border:1px solid var(--line);background:var(--card);border-radius:2px;overflow:hidden;
  display:grid;grid-template-columns:310px 1fr}
@media (max-width:760px){.thrust{grid-template-columns:1fr}}
.thrust .fig{background:var(--fig);border-right:1px solid var(--line)}
@media (max-width:760px){.thrust .fig{border-right:none;border-bottom:1px solid var(--line)}}
.thrust .fig img{width:100%;height:100%;min-height:172px;object-fit:contain;
  object-position:center;display:block}
@media (max-width:760px){.thrust .fig img{height:auto;min-height:0}}
/* the research page is where the figures are the point: give them the full
   column width at their own aspect ratio rather than a 310px slot */
html[data-page="research"] .thrust{grid-template-columns:1fr}
html[data-page="research"] .thrust .fig{border-right:none;border-bottom:1px solid var(--line)}
html[data-page="research"] .thrust .fig img{height:auto;min-height:0;max-height:440px}
/* a near-square figure would otherwise tower over the wide ones; contain keeps
   it whole and the cap keeps the three thrusts visually comparable */
.thrust .txt{padding:19px 22px}
.thrust .n{font-family:'Plex Mono',monospace;font-size:.7rem;color:var(--rust);letter-spacing:.08em}
.thrust h3{font-size:1.12rem;font-weight:800;margin:7px 0 9px;letter-spacing:-.01em}
.thrust p{color:var(--ink-soft);font-size:.93rem}
.thrust .work{margin-top:13px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:.87rem;color:var(--ink-soft)}
.thrust .work b{font-family:'Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:5px}
.thrust .rel{margin-top:12px;font-size:.85rem}
.thrust .rel a{display:block;padding:3px 0;color:var(--steel);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.thrust .rel a:hover{color:var(--rust)}
.qlist{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:22px}
@media (max-width:760px){.qlist{grid-template-columns:1fr}}
.qitem{background:var(--card);padding:16px 18px;display:grid;
  grid-template-columns:24px 1fr;gap:10px;align-items:start}
.qn{font-family:'Plex Mono',monospace;font-size:.7rem;color:var(--rust);
  letter-spacing:.08em;padding-top:3px}
.qtxt{font-size:.89rem;color:var(--ink-soft);line-height:1.6}
.qtxt b{display:block;color:var(--ink);font-weight:700;margin-bottom:5px;font-size:.95rem}
.mbody{color:var(--ink-soft);font-size:.93rem;line-height:1.62;max-width:76ch;
  margin-bottom:14px}
.relwide{margin-top:16px;font-size:.85rem;display:grid;
  grid-template-columns:repeat(2,1fr);gap:0 24px}
@media (max-width:760px){.relwide{grid-template-columns:1fr}}
.relwide a{display:block;padding:5px 0;color:var(--steel);text-decoration:none;
  border-bottom:1px solid var(--line-soft)}
.relwide a:hover{color:var(--rust)}
/* an arXiv preprint is not a refereed paper; say so rather than showing a bare year */
.pre{margin-left:7px;padding:1px 5px;border:1px solid var(--line);border-radius:2px;
  font-family:'Plex Mono',monospace;font-size:.72em;letter-spacing:.03em;color:var(--ink-faint);
  text-transform:uppercase;vertical-align:1px}
.strands{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.strands{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.strands{grid-template-columns:1fr}}
.strand{background:var(--card);padding:15px 17px;text-decoration:none;
  display:flex;flex-direction:column;gap:9px;min-height:96px}
.strand:hover{background:var(--bg-raised)}
.sname{color:var(--ink);font-weight:700;font-size:.92rem;line-height:1.35}
.strand:hover .sname{color:var(--rust)}
.sgo{margin-top:auto;font-family:'Plex Mono',monospace;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}

/* publications */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 22px;
  padding:14px 16px;border:1px solid var(--line);background:var(--card);border-radius:2px;
  position:sticky;top:52px;z-index:20}
/* below this width the controls wrap to three rows: 157px of sticky chrome is
   more than the anchor offset can absorb, and it eats a fifth of a phone screen */
@media (max-width:900px){
  .filters{position:static}
  html[data-page="publications"] [id]{scroll-margin-top:74px}
}
.filters input,.filters select{font-family:'Archivo',sans-serif;font-size:.88rem;
  padding:7px 10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:2px}
.filters input{min-width:230px;flex:1}
.filters .count{font-family:'Plex Mono',monospace;font-size:.74rem;color:var(--ink-faint);white-space:nowrap}
.yeargroup{margin-bottom:26px}
.yeargroup > h2{font-family:'Plex Mono',monospace;font-size:.9rem;color:var(--rust);
  border-bottom:2px solid var(--rust);display:inline-block;padding-bottom:5px;margin-bottom:8px}
.plist{list-style:none;margin:0;padding:0}
.plist li{padding:13px 0;border-top:1px solid var(--line-soft)}
.plist li:first-child{border-top:none}
.pthumb{float:right;width:120px;height:76px;object-fit:contain;margin:2px 0 8px 16px;
  border:1px solid var(--line);border-radius:2px;background:var(--fig)}
@media (max-width:640px){.pthumb{width:88px;height:56px;margin-left:12px}}
.ptitle{font-weight:700;font-size:.98rem;line-height:1.4}
.pmeta{font-family:'Plex Mono',monospace;font-size:.74rem;color:var(--ink-faint);margin-top:5px;line-height:1.55}
.pmeta .venue{color:var(--steel)}
.plinks{margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.plinks a{font-family:'Plex Mono',monospace;font-size:.71rem;text-transform:uppercase;
  letter-spacing:.05em;text-decoration:none;border-bottom:1px solid var(--steel);padding-bottom:1px}
/* PDF, DOI, Link and BibTeX sit on every row, so they carry no information when you
   are scanning. Project, code, video and data do not, and they are the reason to stop
   at a row: mark them so a reader can pick them out of the strip at a glance. */
.plinks a.rich{color:var(--rust);border-bottom-color:var(--rust);font-weight:600}
.plinks a.rich::before{content:"\25CF";font-size:.5em;vertical-align:.35em;margin-right:4px}
.badge{font-family:'Plex Mono',monospace;font-size:.61rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--rust);border:1px solid var(--rust);border-radius:2px;padding:1px 5px;margin-left:6px;
  white-space:nowrap;vertical-align:2px}
.plist li:target{background:var(--bg-raised);box-shadow:-14px 0 0 var(--bg-raised),14px 0 0 var(--bg-raised)}

/* people */
.teamphoto{margin:28px 0 0;border:1px solid var(--line);border-radius:2px;
  overflow:hidden;background:var(--card)}
.teamphoto img{width:100%;height:auto;display:block}
.teamphoto figcaption{padding:9px 14px;font-family:'Plex Mono',monospace;
  font-size:.7rem;letter-spacing:.05em;color:var(--ink-faint)}
.prole{font-family:'Plex Mono',monospace;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-faint);margin:26px 0 12px;font-weight:600}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.person{background:var(--card);padding:12px 15px;border:1px solid var(--line);border-radius:2px}
.person .who{font-weight:700;font-size:.92rem}
.person .now{display:block;font-family:'Plex Mono',monospace;font-size:.7rem;color:var(--steel);margin-top:3px}
.person .pbio{display:block;margin-top:6px;font-size:.82rem;color:var(--ink-soft);line-height:1.5}
#current .pgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
#current .person{display:flex;gap:13px;align-items:flex-start}
.pface{flex:none;width:64px;height:64px;border-radius:3px;overflow:hidden;
  border:1px solid var(--line)}
.pface img{width:100%;height:100%;object-fit:cover;display:block}
.pinit{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  font-family:'Plex Mono',monospace;font-size:1.05rem;font-weight:600;
  color:var(--ink-faint);background:var(--bg-raised)}
.pmain{min-width:0}
.person a{text-decoration:none;color:inherit}
.person a:hover .who{color:var(--rust)}

/* news */
.nlist{list-style:none;margin:0;padding:0}
.nlist li{padding:20px 0;border-top:1px solid var(--line-soft)}
.nlist li:first-child{border-top:none}
.ndate{font-family:'Plex Mono',monospace;font-size:.72rem;color:var(--rust);letter-spacing:.04em}
.nlist h3{font-size:1.06rem;font-weight:800;margin:6px 0 7px;letter-spacing:-.01em}
.nlist p{color:var(--ink-soft);font-size:.92rem;max-width:70ch}
.nsrc{margin-top:7px}
.nsrc a{font-family:'Plex Mono',monospace;font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--steel);text-decoration:none;
  border-bottom:1px solid var(--line)}
.nsrc a:hover{color:var(--rust);border-bottom-color:var(--rust)}
.nlist li.nyear h2{font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;margin:0}
.nlist li.nyear{font-family:'Plex Mono',monospace;font-size:.76rem;letter-spacing:.12em;
  color:var(--ink-faint);border-top:1px solid var(--line);padding:34px 0 0;margin-bottom:-10px}
.nlist li.nyear:first-child{padding-top:0;border-top:none}
.nlist li.nyear + li{border-top:none}
.empty{border:1px dashed var(--line);border-radius:2px;padding:18px 20px;
  color:var(--ink-soft);font-size:.92rem;margin-bottom:22px}
.stale{border-left:2px solid var(--rust);background:var(--card);padding:14px 18px;
  font-size:.9rem;color:var(--ink-soft);margin-bottom:24px}

/* join */
.joing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.joing{grid-template-columns:1fr}}
.jcard{border:1px solid var(--line);background:var(--card);padding:17px 19px;border-radius:2px}
.jcard .label{display:block;margin-bottom:7px}
.jcard p{font-size:.88rem;color:var(--ink-soft)}

footer{padding:34px 0 58px}
.frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center;
  padding-top:26px;border-top:1px solid var(--line)}
.faddr{font-family:'Plex Mono',monospace;font-size:.76rem;color:var(--ink-faint)}
.flinks{display:flex;gap:16px;flex-wrap:wrap}
.flinks a{font-family:'Plex Mono',monospace;font-size:.76rem;color:var(--ink-soft);text-decoration:none}
.flinks a:hover{color:var(--rust)}
.hidden{display:none !important}
.person .pyear{font-family:'Plex Mono',monospace;font-size:.68rem;color:var(--ink-faint);font-weight:400}
.bibbtn{font-family:'Plex Mono',monospace;font-size:.71rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--steel);background:none;border:none;padding:0 0 1px;
  border-bottom:1px solid var(--steel);cursor:pointer}
.bibbtn:hover{color:var(--rust);border-color:var(--rust)}
.bib{margin:10px 0 0;padding:12px 14px;background:var(--bg-raised);border:1px solid var(--line);
  border-radius:2px;font-family:'Plex Mono',monospace;font-size:.74rem;line-height:1.5;
  white-space:pre;overflow-x:auto;color:var(--ink-soft)}
.herolinks{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px}
.herolinks a{font-family:'Plex Mono',monospace;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.05em;text-decoration:none;border-bottom:1px solid var(--steel);padding-bottom:2px}
.herolinks a:hover{border-color:var(--rust)}
#numbers .person .who{font-family:'Plex Mono',monospace;font-size:1.5rem;font-weight:600;color:var(--rust)}
#numbers .person .now{color:var(--ink-soft)}