:root{
  color-scheme: light;
  --bg:#FBFBFB;
  --ink:#2B2828;
  --ink-60:rgba(43,40,40,.68);
  --ink-45:rgba(43,40,40,.52);
  --grey:#808080;
  --blue:#0A35F0;
  --rule:rgba(0,0,0,.14);
  --sans:Inter, -apple-system, system-ui, 'Segoe UI', sans-serif;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pixel:'Silkscreen', 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* masthead bar */
.bar{border-bottom:1px solid var(--rule); background:var(--bg)}
.bar .in{
  max-width:1120px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
}
.bar .who{color:var(--ink); text-decoration:none; font-weight:500}
.bar nav{display:flex; gap:18px; flex-wrap:wrap}
.bar nav a{color:var(--ink-60); text-decoration:none}
.bar nav a:hover, .bar nav a[aria-current]{color:var(--blue)}

main{max-width:720px; margin:0 auto; padding:44px 24px 90px}
.wide{max-width:1000px}

p{margin:0 0 11px}
strong{font-weight:600}
em{font-style:italic}

a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-45); text-underline-offset:2px}
a:hover{color:var(--blue); text-decoration-color:var(--blue)}
a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* display */
h1.big{
  font-family:var(--pixel); font-weight:400; color:var(--blue);
  font-size:clamp(34px,7.4vw,74px); line-height:1.06; letter-spacing:-.01em;
  margin:0 0 20px; text-transform:uppercase; text-wrap:balance;
}
h2{
  font-family:var(--mono); font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
  margin:34px 0 12px;
}
h3{font-family:var(--sans); font-size:17px; font-weight:600; margin:24px 0 8px}

.standfirst{font-family:var(--sans); font-size:17px; line-height:1.55; color:var(--ink); margin-bottom:18px}
.dropcap::first-letter{
  float:left; font-size:52px; line-height:.9; padding:5px 9px 0 0;
  font-family:var(--serif); font-weight:600; color:var(--blue);
}

/* dotted rule, as on the reference */
.dots{height:6px; margin:26px 0; border:0;
  background-image:radial-gradient(var(--ink-45) 1px, transparent 1px);
  background-size:6px 6px; background-position:0 2px; background-repeat:repeat-x; opacity:.7}
hr{border:0; border-top:1px solid var(--rule); margin:30px 0}

ul{list-style:none; margin:0 0 13px; padding:0}
li{margin-bottom:8px; padding-left:18px; position:relative}
li::before{content:"—"; position:absolute; left:0; top:0; color:var(--blue)}

/* bracketed links */
.brk{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue); text-decoration:none; display:inline-block; margin:2px 14px 2px 0}
.brk:hover{color:var(--ink); text-decoration:none}
.brk::before{content:"[ "} .brk::after{content:" → ]"}

/* clickable rows */
.rows{margin:6px 0 16px; border-top:1px solid var(--rule)}
.rows a{
  display:flex; align-items:center; gap:14px; padding:11px 2px;
  border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink);
}
.rows a:hover{background:rgba(10,53,240,.05)}
.rows a:hover .t b{color:var(--blue)}
.rows img{width:32px; height:32px; flex:none; object-fit:cover; border:1px solid var(--rule); background:#fff}
.rows .t{flex:1; min-width:0}
.rows .t b{display:block; font-weight:600; font-size:15.5px; font-family:var(--sans)}
.rows .t span{display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink-45); line-height:1.5; margin-top:1px}
.rows .when{flex:none; font-family:var(--mono); font-size:11.5px; color:var(--ink-45);
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:.06em}
@media (max-width:480px){ .rows .when{display:none} }

/* figures */
figure{margin:22px 0 18px}
figure img{display:block; width:100%; height:auto; border:1px solid var(--rule)}
figcaption{
  margin-top:9px; font-family:var(--mono); font-size:11.5px; line-height:1.6;
  color:var(--ink-45); letter-spacing:.02em;
}
figcaption b{color:var(--blue); font-weight:500; letter-spacing:.1em; text-transform:uppercase}

/* data panel (leaderboard frame) */
.panel{border:1px solid var(--blue); padding:16px 18px; margin:18px 0; background:#fff}
.panel .phead{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); border-bottom:1px solid var(--rule); padding-bottom:9px; margin-bottom:11px;
}
table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px}
table th{
  text-align:left; font-weight:500; color:var(--ink-45); letter-spacing:.1em;
  text-transform:uppercase; font-size:10.5px; padding:0 8px 8px 0; border-bottom:1px solid var(--rule);
}
table td{padding:8px 8px 8px 0; border-bottom:1px solid var(--rule); vertical-align:top}
table td:last-child, table th:last-child{text-align:right; padding-right:0}
table .rank{color:var(--ink-45); width:30px}
.pending{color:var(--ink-45); font-style:italic}
.tablewrap{overflow-x:auto}

.note{
  border-left:2px solid var(--blue); padding:10px 0 10px 15px; margin:16px 0;
  font-family:var(--mono); font-size:12.5px; line-height:1.65; color:var(--ink-60);
}

.stat{
  display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--rule); margin:18px 0;
}
.stat div{flex:1 1 140px; border-bottom:1px solid var(--rule); padding:12px 14px 12px 0}
.stat b{display:block; font-family:var(--mono); font-size:21px; font-weight:500; color:var(--blue); font-variant-numeric:tabular-nums}
.stat span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); margin-top:4px}

.backlink{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:22px}
.backlink a{color:var(--ink-45); text-decoration:none}
.backlink a:hover{color:var(--blue)}

footer{margin-top:34px; padding-top:18px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-45); line-height:2}
footer a{color:var(--ink-45); text-decoration-color:var(--rule)}
footer a:hover{color:var(--blue)}

::selection{background:rgba(10,53,240,.18)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* two-up photo grid */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin:22px 0 18px; align-items:start}
.grid2 figure{margin:0; display:flex; flex-direction:column; min-width:0}
.grid2 img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover}
.grid2 figcaption{margin-top:9px}
@media (max-width:560px){ .grid2{grid-template-columns:1fr} .grid2 img{aspect-ratio:4/3} }