:root{--paper:#FFFFFF;--ink:#111013;--red:#E1112C;--blush:#FFD9DF;--grey:#6B6870;--rule:#111013;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--display);font-size:18px;line-height:1.65}
a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--red)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.bar{border-bottom:2px solid var(--rule)}
.bar .wrap{display:flex;align-items:center;gap:16px;padding-block:16px}
.logo{display:block;line-height:0}
.logo img{height:40px;width:auto}
.nav{margin-left:auto;display:flex;gap:18px;font-family:var(--mono);font-size:14px;font-weight:600}
.nav a{text-decoration:none}
.nav a[aria-current]{color:var(--red)}

.head{border-bottom:2px solid var(--rule);background:var(--blush)}
.head .wrap{padding-block:48px 40px}
.kicker{font-family:var(--mono);font-size:14px;color:var(--red);font-weight:600;margin:0 0 14px}
.kicker a{color:var(--red);text-decoration:none}
h1{font-weight:850;font-stretch:112%;font-size:clamp(34px,5.4vw,64px);line-height:1;letter-spacing:-.035em;margin:0 0 16px;max-width:20ch;text-wrap:balance}
.dek{font-size:clamp(18px,1.8vw,21px);max-width:56ch;margin:0}
.meta{font-family:var(--mono);font-size:13px;color:var(--grey);margin:18px 0 0}

article{max-width:68ch;margin:0 auto;padding:44px max(20px,env(safe-area-inset-right,0px)) 72px max(20px,env(safe-area-inset-left,0px))}
article h2{font-weight:850;font-stretch:108%;font-size:clamp(24px,3vw,32px);line-height:1.1;letter-spacing:-.02em;margin:44px 0 12px}
article h3{font-weight:800;font-size:20px;margin:28px 0 6px}
article p,article ul,article ol{margin:0 0 16px}
article li{margin-bottom:6px}
.short{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--blush);padding:18px 22px;margin:0 0 32px}
.short strong{font-family:var(--mono);font-size:13px;color:var(--red);display:block;margin-bottom:6px}
.short p:last-child,.short ul:last-child{margin-bottom:0}
.tbl{overflow-x:auto;margin:0 0 20px}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px dashed #BDB9C2;vertical-align:top}
th{font-family:var(--mono);font-size:13px;border-bottom:2px solid var(--ink)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tr.best td{background:var(--ink);color:var(--paper)}
.calc{font-family:var(--mono);font-size:15px;background:#F6F4F7;border-left:4px solid var(--red);padding:14px 16px;margin:0 0 20px;overflow-x:auto}
.next{border-top:2px solid var(--rule);margin-top:48px;padding-top:20px;font-family:var(--mono);font-size:14px}

.list{max-width:1180px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right,0px)) 72px max(20px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.list{grid-template-columns:1fr}}
.card{display:block;text-decoration:none;padding:32px 28px 36px 0;border-bottom:2px solid var(--rule)}
.card:nth-child(odd){border-right:2px solid var(--rule)}
.card:nth-child(even){padding-left:28px}
@media (max-width:760px){.card:nth-child(odd){border-right:0}.card:nth-child(even){padding-left:0}}
.card .n{font-family:var(--mono);font-size:14px;color:var(--red);font-weight:600}
.card h2{font-weight:800;font-stretch:110%;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;line-height:1.1;margin:8px 0 10px}
.card p{margin:0;color:#3A383D}
.card:hover h2{color:var(--red)}

footer{background:var(--ink);color:#9C98A2}
footer .wrap{padding-block:18px 28px;font-family:var(--mono);font-size:12px;display:flex;gap:8px 24px;flex-wrap:wrap}
footer a{color:#C9C6CE}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}