@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,600;6..72,700&display=swap');
:root{
--bg:#F3EFE4;--ink:#171512;--muted:#5C5647;--hair:#BDB39C;--bar-weak:#A0977F;--ad:#E4DDCC;--accent:#A4201B;--max:1280px}
*{
box-sizing:border-box}
html{
background:var(--bg);color:var(--ink)}
body{
margin:0;font-family:'IBM Plex Sans Condensed',Arial,sans-serif;font-variant-numeric:tabular-nums;line-height:1.45}
.shell{
max-width:var(--max);margin:auto;padding:0 16px}
.site-header{
border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand,h1,h2,h3{
font-family:Newsreader,Georgia,serif}
.brand{
font-size:1.5rem;color:var(--ink);font-weight:700}
.site-header nav{
display:flex;gap:24px}
.site-header a,a{
color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
.site-header a:hover,.site-header a:focus,.kicker{
color:var(--accent)}
main{
max-width:900px;padding:32px 0 64px}
.page-heading{
border-bottom:1px solid var(--hair);padding-bottom:16px}
.kicker{
text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.switch{
font-weight:700;display:flex;gap:20px}
.breadcrumbs ol{
display:flex;gap:8px;list-style:none;padding:0;color:var(--muted);font-size:.9rem}
.breadcrumbs li+li:before{
content:'›';margin-right:8px}
section{
border-top:3px solid var(--ink);margin-top:32px;padding-top:12px}
h1{
font-size:clamp(2.2rem,6vw,4.5rem);line-height:1.05;margin:12px 0}
h2{
font-family:'IBM Plex Sans Condensed',Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem}
h3{
font-size:1.35rem;margin-bottom:4px}
small,.muted,.bio{
color:var(--muted)}
table{
width:100%;border-collapse:collapse;margin:12px 0 24px}
caption{
text-align:left;color:var(--muted);padding:4px 0}
th,td{
text-align:left;border-bottom:1px dotted var(--hair);padding:10px 8px 10px 0}
.line{
display:flex;justify-content:space-between;border-bottom:1px dotted var(--hair);padding:10px 0}
.ad{
height:250px;background:var(--ad);display:grid;place-items:center;margin:32px auto;color:var(--muted);max-width:300px}
.clash{
border:3px solid var(--ink);padding:16px;margin:24px 0}
.columns{
display:grid;grid-template-columns:1fr 1fr;gap:32px}
.mirror figcaption{
color:var(--muted);margin-bottom:16px}
.mirror-head{
display:grid;grid-template-columns:220px 70px 1fr 1fr 70px;gap:8px;margin-bottom:4px;text-align:center;font-weight:700}
.mirror-head span:nth-child(2){grid-column:2 / 4}
.mirror-head span:nth-child(3){grid-column:4 / 6}
.mirror-row{
display:grid;grid-template-columns:220px 70px 1fr 1fr 70px;gap:8px;align-items:center;border-bottom:1px dotted var(--hair);padding:8px 0}
.metric-value{
text-align:center}
.bar{
height:12px;background:var(--bar-weak);width:var(--bar-width);display:block}
.bar.left{
justify-self:end;background:var(--ink)}
.bar.right{
justify-self:start}
.bar--none{display:none}
+ .bar--0{--bar-width:0%}
 .bar--1{--bar-width:1%}
 .bar--2{--bar-width:2%}
 .bar--3{--bar-width:3%}
 .bar--4{--bar-width:4%}
 .bar--5{--bar-width:5%}
 .bar--6{--bar-width:6%}
 .bar--7{--bar-width:7%}
 .bar--8{--bar-width:8%}
 .bar--9{--bar-width:9%}
 .bar--10{--bar-width:10%}
 .bar--11{--bar-width:11%}
 .bar--12{--bar-width:12%}
 .bar--13{--bar-width:13%}
 .bar--14{--bar-width:14%}
 .bar--15{--bar-width:15%}
 .bar--16{--bar-width:16%}
 .bar--17{--bar-width:17%}
 .bar--18{--bar-width:18%}
 .bar--19{--bar-width:19%}
 .bar--20{--bar-width:20%}
 .bar--21{--bar-width:21%}
 .bar--22{--bar-width:22%}
 .bar--23{--bar-width:23%}
 .bar--24{--bar-width:24%}
 .bar--25{--bar-width:25%}
 .bar--26{--bar-width:26%}
 .bar--27{--bar-width:27%}
 .bar--28{--bar-width:28%}
 .bar--29{--bar-width:29%}
 .bar--30{--bar-width:30%}
 .bar--31{--bar-width:31%}
 .bar--32{--bar-width:32%}
 .bar--33{--bar-width:33%}
 .bar--34{--bar-width:34%}
 .bar--35{--bar-width:35%}
 .bar--36{--bar-width:36%}
 .bar--37{--bar-width:37%}
 .bar--38{--bar-width:38%}
 .bar--39{--bar-width:39%}
 .bar--40{--bar-width:40%}
 .bar--41{--bar-width:41%}
 .bar--42{--bar-width:42%}
 .bar--43{--bar-width:43%}
 .bar--44{--bar-width:44%}
 .bar--45{--bar-width:45%}
 .bar--46{--bar-width:46%}
 .bar--47{--bar-width:47%}
 .bar--48{--bar-width:48%}
 .bar--49{--bar-width:49%}
 .bar--50{--bar-width:50%}
 .bar--51{--bar-width:51%}
 .bar--52{--bar-width:52%}
 .bar--53{--bar-width:53%}
 .bar--54{--bar-width:54%}
 .bar--55{--bar-width:55%}
 .bar--56{--bar-width:56%}
 .bar--57{--bar-width:57%}
 .bar--58{--bar-width:58%}
 .bar--59{--bar-width:59%}
 .bar--60{--bar-width:60%}
 .bar--61{--bar-width:61%}
 .bar--62{--bar-width:62%}
 .bar--63{--bar-width:63%}
 .bar--64{--bar-width:64%}
 .bar--65{--bar-width:65%}
 .bar--66{--bar-width:66%}
 .bar--67{--bar-width:67%}
 .bar--68{--bar-width:68%}
 .bar--69{--bar-width:69%}
 .bar--70{--bar-width:70%}
 .bar--71{--bar-width:71%}
 .bar--72{--bar-width:72%}
 .bar--73{--bar-width:73%}
 .bar--74{--bar-width:74%}
 .bar--75{--bar-width:75%}
 .bar--76{--bar-width:76%}
 .bar--77{--bar-width:77%}
 .bar--78{--bar-width:78%}
 .bar--79{--bar-width:79%}
 .bar--80{--bar-width:80%}
 .bar--81{--bar-width:81%}
 .bar--82{--bar-width:82%}
 .bar--83{--bar-width:83%}
 .bar--84{--bar-width:84%}
 .bar--85{--bar-width:85%}
 .bar--86{--bar-width:86%}
 .bar--87{--bar-width:87%}
 .bar--88{--bar-width:88%}
 .bar--89{--bar-width:89%}
 .bar--90{--bar-width:90%}
 .bar--91{--bar-width:91%}
 .bar--92{--bar-width:92%}
 .bar--93{--bar-width:93%}
 .bar--94{--bar-width:94%}
 .bar--95{--bar-width:95%}
 .bar--96{--bar-width:96%}
 .bar--97{--bar-width:97%}
 .bar--98{--bar-width:98%}
 .bar--99{--bar-width:99%}
 .bar--100{--bar-width:100%}
.ratings{
height:100px;display:flex;align-items:end;gap:6px;border-bottom:1px solid var(--ink)}
.ratings span{
height:var(--rating-height);width:22px;background:var(--ink);font-size:.7rem;padding-top:4px}
+ .rating--0{--rating-height:0%}
 .rating--1{--rating-height:1%}
 .rating--2{--rating-height:2%}
 .rating--3{--rating-height:3%}
 .rating--4{--rating-height:4%}
 .rating--5{--rating-height:5%}
 .rating--6{--rating-height:6%}
 .rating--7{--rating-height:7%}
 .rating--8{--rating-height:8%}
 .rating--9{--rating-height:9%}
 .rating--10{--rating-height:10%}
 .rating--11{--rating-height:11%}
 .rating--12{--rating-height:12%}
 .rating--13{--rating-height:13%}
 .rating--14{--rating-height:14%}
 .rating--15{--rating-height:15%}
 .rating--16{--rating-height:16%}
 .rating--17{--rating-height:17%}
 .rating--18{--rating-height:18%}
 .rating--19{--rating-height:19%}
 .rating--20{--rating-height:20%}
 .rating--21{--rating-height:21%}
 .rating--22{--rating-height:22%}
 .rating--23{--rating-height:23%}
 .rating--24{--rating-height:24%}
 .rating--25{--rating-height:25%}
 .rating--26{--rating-height:26%}
 .rating--27{--rating-height:27%}
 .rating--28{--rating-height:28%}
 .rating--29{--rating-height:29%}
 .rating--30{--rating-height:30%}
 .rating--31{--rating-height:31%}
 .rating--32{--rating-height:32%}
 .rating--33{--rating-height:33%}
 .rating--34{--rating-height:34%}
 .rating--35{--rating-height:35%}
 .rating--36{--rating-height:36%}
 .rating--37{--rating-height:37%}
 .rating--38{--rating-height:38%}
 .rating--39{--rating-height:39%}
 .rating--40{--rating-height:40%}
 .rating--41{--rating-height:41%}
 .rating--42{--rating-height:42%}
 .rating--43{--rating-height:43%}
 .rating--44{--rating-height:44%}
 .rating--45{--rating-height:45%}
 .rating--46{--rating-height:46%}
 .rating--47{--rating-height:47%}
 .rating--48{--rating-height:48%}
 .rating--49{--rating-height:49%}
 .rating--50{--rating-height:50%}
 .rating--51{--rating-height:51%}
 .rating--52{--rating-height:52%}
 .rating--53{--rating-height:53%}
 .rating--54{--rating-height:54%}
 .rating--55{--rating-height:55%}
 .rating--56{--rating-height:56%}
 .rating--57{--rating-height:57%}
 .rating--58{--rating-height:58%}
 .rating--59{--rating-height:59%}
 .rating--60{--rating-height:60%}
 .rating--61{--rating-height:61%}
 .rating--62{--rating-height:62%}
 .rating--63{--rating-height:63%}
 .rating--64{--rating-height:64%}
 .rating--65{--rating-height:65%}
 .rating--66{--rating-height:66%}
 .rating--67{--rating-height:67%}
 .rating--68{--rating-height:68%}
 .rating--69{--rating-height:69%}
 .rating--70{--rating-height:70%}
 .rating--71{--rating-height:71%}
 .rating--72{--rating-height:72%}
 .rating--73{--rating-height:73%}
 .rating--74{--rating-height:74%}
 .rating--75{--rating-height:75%}
 .rating--76{--rating-height:76%}
 .rating--77{--rating-height:77%}
 .rating--78{--rating-height:78%}
 .rating--79{--rating-height:79%}
 .rating--80{--rating-height:80%}
 .rating--81{--rating-height:81%}
 .rating--82{--rating-height:82%}
 .rating--83{--rating-height:83%}
 .rating--84{--rating-height:84%}
 .rating--85{--rating-height:85%}
 .rating--86{--rating-height:86%}
 .rating--87{--rating-height:87%}
 .rating--88{--rating-height:88%}
 .rating--89{--rating-height:89%}
 .rating--90{--rating-height:90%}
 .rating--91{--rating-height:91%}
 .rating--92{--rating-height:92%}
 .rating--93{--rating-height:93%}
 .rating--94{--rating-height:94%}
 .rating--95{--rating-height:95%}
 .rating--96{--rating-height:96%}
 .rating--97{--rating-height:97%}
 .rating--98{--rating-height:98%}
 .rating--99{--rating-height:99%}
 .rating--100{--rating-height:100%}
.letters{
display:flex;flex-wrap:wrap;gap:12px;font-weight:700}
footer{
border-top:1px solid var(--hair);padding:24px 0 40px;color:var(--muted)}

@media(min-width:640px){
.shell{
padding:0 56px}
}

@media(max-width:639px){
.site-header{
align-items:flex-start;flex-direction:column}
.site-header nav{
width:100%;justify-content:space-between;gap:8px}
.mirror-row{
grid-template-columns:1fr 52px 1fr 52px;grid-template-areas:'metric metric metric metric' 'value left right value2'}
.metric{
grid-area:metric}
.metric-value:first-of-type{
grid-area:value}
.metric-value:last-of-type{
grid-area:value2}
.bar.left{
grid-area:left}
.bar.right{
grid-area:right}
.columns{
grid-template-columns:1fr}
.line{
gap:12px}
.mirror-head{
grid-template-columns:1fr 1fr}
.mirror-head span:first-child{
display:none}
.mirror-head span:nth-child(2),.mirror-head span:nth-child(3){
grid-column:auto}
}

@media(prefers-color-scheme:dark){
:root{
--bg:#15140F;--ink:#ECE5D3;--muted:#A89F8A;--hair:#4A463B;--bar-weak:#6E6857;--ad:#1F1D17;--accent:#F0776C}
}