/* Buyer's guide, long-read layout.
   One chapter on screen at a time; a reading column of ~68 characters with notes in the right margin;
   hierarchy from size and weight (Anton for titles only, Open Sauce for everything you read); rules and space instead of boxes. */
:root{
  --paper:#F8F7F3; --tint:#EFEEE8; --rule:#DCDAD3; --ink:#121517; --text:#33383A; --mute:#6A6E6F;
  --red:#B41F2B; --rose:#E07A72; --night:#0B0F11; --night-2:#171B1D; --bone:#F5F5F1; --good:#2E6B45;
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --body:"Open Sauce","Helvetica Neue",Arial,system-ui,sans-serif;
  --col:680px; --margin:250px; --gx:max(16px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 18.5px/1.72 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--red)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
.wrap{max-width:1360px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.tab{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* cover */
.cover{position:relative;min-height:min(78vh,740px);display:flex;align-items:flex-end;background:var(--night);color:var(--bone);overflow:hidden}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(11,15,17,.95) 0%,rgba(11,15,17,.55) 38%,rgba(11,15,17,.1) 65%,rgba(11,15,17,.5) 100%)}
@media (max-width:640px){.cover{min-height:0}.cover::after{background:linear-gradient(180deg,rgba(11,15,17,.5) 0,rgba(11,15,17,0) 96px,rgba(11,15,17,0) min(40svh,350px),rgba(11,15,17,.9) min(54svh,470px),var(--night) min(60svh,520px))}}
.cover .in{position:relative;z-index:2;width:100%;padding-block:120px clamp(40px,7vh,72px)}
.eyebrow{font:700 12.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase}
.cover .eyebrow{color:var(--rose)}
.cover h1{font:400 clamp(56px,8.4vw,132px)/.94 var(--display);text-transform:uppercase;margin:16px 0 0;max-width:12ch;text-wrap:balance}
.cover .dek{font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:46ch;margin:22px 0 0;color:rgba(245,245,241,.86)}

/* meta line under the cover */
.meta{border-bottom:1px solid var(--rule)}
.meta .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-block:18px;font-size:14.5px;color:var(--mute)}
.meta b{color:var(--ink);font-weight:600}
.meta .ok{display:inline-flex;align-items:center;gap:7px;color:var(--good);font-weight:700}
.meta .ok svg{width:17px;height:17px}
.meta .listen{display:flex;gap:6px;margin-left:auto}
.meta .listen a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--rule);text-decoration:none;font:700 12px/1 var(--body);letter-spacing:.08em;color:var(--ink)}
.meta .listen a:hover{border-color:var(--ink)}
.meta .listen svg{width:15px;height:15px;fill:currentColor}
.meta .spon{flex-basis:100%;font-size:13px}
.meta .spon b{letter-spacing:.14em;text-transform:uppercase;font-size:12px}

/* sticky chapter bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(248,247,243,.92);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid var(--rule)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--paper)}
.bar .wrap{display:flex;align-items:center;gap:16px;height:56px}
.bar .t{min-width:0;display:flex;align-items:baseline;gap:12px;white-space:nowrap;overflow:hidden}
.bar .t span{font:400 18px/1 var(--display);color:var(--red)}
.bar .t b{font-weight:700;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.bar .t small{color:var(--mute);font-size:13px}
.bar .contents{margin-left:auto;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);cursor:pointer;font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);flex:none}
.bar .contents svg{width:16px;height:16px}
.bar .prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--red);width:0;transition:width .1s linear}
.sheet{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:62px;width:min(380px,calc(100vw - 32px));max-height:min(70vh,640px);overflow:auto;background:var(--paper);border:1px solid var(--rule);border-radius:16px;box-shadow:0 30px 70px rgba(18,21,23,.18);padding:10px}
.sheet a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text);font-size:15px;line-height:1.35}
.sheet a span{font:400 16px/1.3 var(--display);color:var(--mute)}
.sheet a:hover{background:var(--tint)}
.sheet a[aria-current]{background:var(--ink);color:var(--bone)}.sheet a[aria-current] span{color:var(--rose)}

/* layout: contents rail | reading column with right-margin notes */
.layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;padding-block:64px 40px}
.rail{position:sticky;top:88px;align-self:start;font-size:14px;line-height:1.35}
.rail h2{font:700 11.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.rail ol{list-style:none;margin:0;padding:0}
.rail a{display:grid;grid-template-columns:26px minmax(0,1fr);padding:7px 0;text-decoration:none;color:var(--mute)}
.rail a span{font:400 14px/1.35 var(--display)}
.rail a:hover{color:var(--ink)}
.rail a[aria-current]{color:var(--ink);font-weight:700}.rail a[aria-current] span{color:var(--red)}
.main{min-width:0;max-width:calc(var(--col) + var(--margin) + 48px)}
@media (max-width:1100px){.layout{grid-template-columns:minmax(0,1fr)}.rail{display:none}}

/* chapter */
.ch{animation:fade .5s cubic-bezier(.2,.7,.2,1)}
@keyframes fade{from{opacity:.001;transform:translateY(10px)}}
.ch>*{max-width:var(--col)}
.ch .num{font:700 12.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:flex;gap:14px;align-items:center}
.ch .num i{font-style:normal;color:var(--mute);letter-spacing:.06em;text-transform:none;font-weight:400}
.ch h2{font:400 clamp(46px,5.6vw,84px)/.96 var(--display);text-transform:uppercase;color:var(--ink);margin:16px 0 0;text-wrap:balance}
.ch .stand{font-size:clamp(20px,1.7vw,23px);line-height:1.5;color:var(--ink);margin:26px 0 0;text-wrap:pretty}
.ch .inthis{margin:30px 0 8px;padding:16px 0;border-block:1px solid var(--rule);font-size:14.5px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 18px}
.ch .inthis b{color:var(--ink);font-weight:700;margin-right:4px}
.ch .inthis a{color:var(--mute);text-decoration:none}.ch .inthis a:hover{color:var(--red)}
.ch h3{font:700 clamp(23px,2vw,28px)/1.2 var(--body);letter-spacing:-.012em;color:var(--ink);margin:56px 0 14px;text-wrap:balance;scroll-margin-top:80px}
.ch h4{font:700 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:34px 0 10px}
.ch p{margin:0 0 20px;text-wrap:pretty}
.ch p.lead::first-letter{float:left;font:400 5.1em/.78 var(--display);color:var(--red);margin:.06em .12em 0 0}
.ch ul.list,.ch ol.list{margin:0 0 22px;padding-left:22px}
.ch ul.list li,.ch ol.list li{margin-bottom:8px;padding-left:4px}
.ch ul.list li::marker{color:var(--red)}
.ch strong{color:var(--ink)}
.dia{color:var(--red);font-size:.62em;vertical-align:super;margin-left:1px}

/* margin notes (sidenotes); fall inline on narrower screens */
.m{float:right;clear:right;width:var(--margin);margin:6px 0 20px 48px;padding-top:12px;border-top:2px solid var(--ink);font-size:14px;line-height:1.5;color:var(--text)}
.m .mh{margin:0 0 8px;font:700 11.5px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.m .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule)}
.m .row b{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.m .src{display:block;margin-top:8px;font-size:12.5px;color:var(--mute)}
@media (max-width:1279px){.m{float:none;width:auto;max-width:var(--col);margin:28px 0;padding:14px 0 4px}}
.tw,.fig,.chart,.verdict,.end,.facts,.tl{clear:right}

/* key facts: a row of numbers, no boxes */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:34px 0;border-top:2px solid var(--ink)}
.facts div{padding:16px 16px 4px 0}
.facts div+div{padding-left:16px;border-left:1px solid var(--rule)}
.facts b{display:block;font:400 clamp(30px,3vw,42px)/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:8px;font-size:13px;line-height:1.35;color:var(--mute)}
@media (max-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts div:nth-child(3){padding-left:0;border-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--rule)}}

/* quotes */
.pull{margin:44px 0;padding:0}
.pull q{display:block;font:400 clamp(32px,3.4vw,46px)/1.02 var(--display);text-transform:uppercase;color:var(--ink);quotes:"“" "”"}
.pull q::before{color:var(--red)}
.pull figcaption{margin-top:14px;font-size:14px;color:var(--mute)}
.said{margin:26px 0;padding-left:22px;border-left:2px solid var(--red);font-size:18.5px;color:var(--ink)}
.said cite{display:block;margin-top:6px;font-style:normal;font-size:13.5px;color:var(--mute)}
.said cite a{color:var(--mute)}

/* figures */
.fig{margin:40px 0;max-width:calc(var(--col) + var(--margin) + 48px)}
.fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.fig figcaption{font-size:13.5px;color:var(--mute);margin-top:10px;max-width:var(--col)}

/* tables */
.tw{overflow-x:auto;margin:26px 0 30px;max-width:calc(var(--col) + var(--margin) + 48px)}
table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;color:var(--text);font-variant-numeric:tabular-nums}
caption{text-align:left;font:700 11.5px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-bottom:12px}
th{text-align:left;font-weight:700;font-size:12.5px;color:var(--mute);padding:10px 14px 10px 0;border-bottom:2px solid var(--ink);white-space:nowrap;vertical-align:bottom}
td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
td:first-child{font-weight:700;color:var(--ink)}
tr.me td{background:var(--tint)}
tr.me td:first-child{color:var(--red)}
td.n,th.n{text-align:right}
.tw.wide table{min-width:720px}

/* verdict strip */
.verdict{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:30px 0 10px;max-width:calc(var(--col) + var(--margin) + 48px)}
.verdict h4{margin:0 0 10px;padding-top:12px;border-top:2px solid var(--ink)}
.verdict .neg h4{border-top-color:var(--red)}
.verdict ul{margin:0;padding-left:18px;font-size:16px;line-height:1.55}
.verdict li{margin-bottom:6px}
@media (max-width:820px){.verdict{grid-template-columns:1fr;gap:6px}}

/* timeline */
.tl{list-style:none;margin:26px 0 30px;padding:0}
.tl li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;padding:14px 0;border-bottom:1px solid var(--rule)}
.tl time{font:400 22px/1.1 var(--display);color:var(--red)}
.tl b{color:var(--ink)}

/* ad label and partner list */
.ad{display:inline-block;font:700 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:4px 6px 3px;border-radius:3px;vertical-align:2px;margin-left:6px}
.partners{list-style:none;margin:20px 0;padding:0;border-top:2px solid var(--ink)}
.partners li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.partners b{color:var(--ink);font-size:17px}
.partners p{margin:2px 0 0;font-size:15px;color:var(--mute)}
.partners a.go{font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:11px 16px;border-radius:999px;border:1px solid var(--ink);white-space:nowrap}
.partners a.go:hover{background:var(--ink);color:var(--paper)}

/* chart */
.chart{margin:24px 0 8px;max-width:calc(var(--col) + var(--margin) + 48px)}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.legend button{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);font:600 13px/1 var(--body);color:var(--ink);cursor:pointer}
.legend button[aria-pressed=false]{opacity:.4}
.legend i{width:10px;height:10px;border-radius:50%}

/* transcript */
.trsearch{display:flex;align-items:center;gap:10px;margin:24px 0 8px;padding:4px 4px 4px 16px;border:1px solid var(--rule);border-radius:999px;background:#fff}
.trsearch input{flex:1;min-width:0;border:0;background:none;font:400 16px var(--body);color:var(--ink);padding:10px 0}
.trsearch input:focus{outline:none}
.trsearch:focus-within{border-color:var(--ink)}
.trcount{font-size:13px;color:var(--mute);padding-right:12px;white-space:nowrap}
.trchap{font:700 16px/1.3 var(--body);color:var(--ink);margin:36px 0 6px;display:flex;gap:12px;align-items:baseline}
.trchap time{font:400 15px var(--display);color:var(--red)}
.tr p{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;margin:0;padding:8px 0;font-size:16px;line-height:1.6}
.tr p b{font:700 11px/2.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tr p.n b{color:var(--red)}
.tr mark{background:#F4D9D3;color:var(--ink);border-radius:2px}

/* end of chapter: next chapter + the row of all chapters */
.end{margin-top:72px;max-width:calc(var(--col) + var(--margin) + 48px);border-top:2px solid var(--ink)}
.next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:28px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule)}
.next small{display:block;font:700 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.next strong{display:block;font:400 clamp(34px,3.6vw,52px)/1 var(--display);text-transform:uppercase}
.next em{display:block;font-style:normal;font-size:16px;color:var(--mute);margin-top:10px;max-width:56ch}
.next .arr{width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:transform .25s,background .25s}
.next .arr svg{width:24px;height:24px}
.next:hover .arr{background:var(--red);transform:translateX(4px)}
.next:hover strong{color:var(--red)}
.endrow{display:flex;align-items:center;gap:14px;padding:16px 0}
.endrow .prev{font-size:14px;color:var(--mute);text-decoration:none;white-space:nowrap}
.endrow .prev:hover{color:var(--ink)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin-left:auto;mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:1px solid var(--rule);text-decoration:none;font-size:13px;color:var(--text);white-space:nowrap}
.chips a span{font:400 13px/1 var(--display);color:var(--mute)}
.chips a:hover{border-color:var(--ink)}
.chips a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.chips a[aria-current] span{color:var(--rose)}
@media (max-width:700px){.endrow{flex-wrap:wrap}.chips{margin-left:0;width:100%}}

@media (max-width:520px){.bar .t small{display:none}.bar .contents{padding:9px 12px}}

/* simpler intro: one quiet line and one Listen button */
.meta .wrap{justify-content:space-between;padding-block:14px}
.meta .listen{margin-left:0}
.meta .listen a{background:var(--ink);color:var(--paper);border-color:var(--ink);padding:11px 18px}
.meta .listen a:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
/* cover: three photos of the car, the whole car given the widest slice */
.cover .slices{grid-template-columns:1.9fr 1fr 1fr;inset:-4% -6%}
@media (max-width:640px){.cover .slices{grid-template-columns:none;grid-template-rows:1.4fr 1fr 1fr;inset:-36px -4% auto;height:min(60svh,520px)}.cover .in{padding-top:min(50svh,440px)}}