/* Espresso Rated: "stainless and pressure gauge" (sites/espresso/DESIGN.md). Shared page structure and classes (from the engine templates); this file is the look. Base layer is the shared stylesheet; the Espresso Rated layer at the end sets tokens, fonts and the gauge details. */
/* Self-hosted fonts, SIL Open Font License: Bodoni Moda (display) and Public Sans (text), Latin subsets. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/bodoni-moda-latin-wght-normal.woff2) format("woff2");}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/public-sans-latin-wght-normal.woff2) format("woff2");}
:root{--ground:#E4E8E2;--panel:#F1F3EF;--ink:#15191A;--muted:#5A625F;--rule:#C5CCC4;--blue:#1E33C8;--wash:#C9D0EE;--brass:#8A6A1F;--on-blue:#fff;
--display:"Bricolage Grotesque",sans-serif;--body:"Atkinson Hyperlegible Next",sans-serif;--mono:"Martian Mono",monospace}
@media (prefers-color-scheme:dark){:root{--ground:#121614;--panel:#1A1F1C;--ink:#E3E7E1;--muted:#9AA39D;--rule:#323A35;--blue:#8C9BFF;--wash:#262E52;--brass:#C9A44E;--on-blue:#0B0F2E}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 18px/1.6 var(--body)}
a{color:var(--blue);text-underline-offset:3px}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;background:var(--panel);padding:6px 10px;z-index:9}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}@media(min-width:760px){.wrap{padding:0 40px}}
.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
h1,h2,h3{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:700;letter-spacing:-.01em;line-height:1.08;margin:0}
h1{font-size:clamp(40px,6vw,64px);margin-top:8px}
.muted,.sm2{color:var(--muted)}.sm2{font-size:15px}

/* masthead + logo (roll-mark stamp) */
.mast{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 0;padding:16px 0;border-bottom:1px solid var(--rule)}
.logo{text-decoration:none;color:var(--ink);line-height:0}
.stamp{display:inline-block;border:3px solid currentColor;padding:6px 10px 4px;font:800 21px/1 var(--display);font-variation-settings:"wdth" 100;letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.nav a{color:var(--ink);text-decoration:none;font-size:15px;padding:4px 0;border-bottom:2px solid transparent}
.nav a[aria-current=page]{border-bottom-color:var(--blue)}.nav a:hover{color:var(--blue)}
.crumbs{font-size:14px;color:var(--muted);margin:22px 0 2px}.crumbs a{color:var(--muted)}
.gen{font:600 14px var(--mono);border:1px solid var(--ink);border-radius:2px;padding:2px 7px;vertical-align:middle;margin-left:10px;position:relative;top:-8px}

/* buttons */
.btn{display:inline-flex;align-items:center;min-height:44px;background:var(--blue);color:var(--on-blue);text-decoration:none;font:700 16px var(--body);padding:0 18px;border-radius:2px;border:0;cursor:pointer}
.btn:hover{filter:brightness(1.12)}
.more{font-size:15px;white-space:nowrap}

/* model page grid */
.grid{display:grid;gap:28px;margin-top:22px;grid-template-areas:"hero" "rail" "body"}
@media(min-width:1000px){.grid{grid-template-columns:minmax(0,1fr) 340px;column-gap:56px;grid-template-areas:"hero rail" "body rail"}}
.rail{grid-area:rail}@media(min-width:1000px){.rail-in{position:sticky;top:20px}}
.body{grid-area:body;min-width:0}

/* gallery: big stage, vertical thumbs on the right (desktop), row below (mobile) */
.gal{grid-area:hero;margin:0;display:grid;gap:10px;min-width:0}
@media(min-width:700px){.gal{grid-template-columns:minmax(0,1fr) 92px}}
.gstage{position:relative;background:#fff;border-radius:2px;overflow:hidden;aspect-ratio:3/2}
.gm{position:absolute;inset:0;width:100%;height:100%}.gm.contain{object-fit:contain;padding:3% 4%}.gm.cover{object-fit:cover}
.gcap{position:absolute;left:12px;bottom:12px;font-size:13px;background:rgba(255,255,255,.88);color:#15191A;padding:2px 8px;border-radius:2px}
.gcap a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.gthumbs{display:flex;gap:8px;overflow-x:auto}
@media(min-width:700px){.gthumbs{flex-direction:column;overflow:visible}}
.gt{flex:none;border:2px solid transparent;border-radius:3px;background:#fff;line-height:0}
.gt.on{border-color:var(--blue)}
.gt img{width:84px;height:56px;object-fit:cover;border-radius:1px;display:block}

/* rail */
.total .score{font-size:84px;color:var(--blue);letter-spacing:-.04em;line-height:.9}
.total.sm .score{font-size:52px}
.of{font:600 18px var(--mono);color:var(--muted)}
.tag{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:700;font-size:28px;line-height:1.1;margin:12px 0 8px}
.bw{font-size:16px;margin:0 0 18px;line-height:1.5}.bw span{color:var(--muted);display:inline-block;min-width:96px}
.meters{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.meters li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--rule)}
.ml{font-weight:600;font-size:16px}.ml a{color:var(--ink);text-decoration:none}.ml a:hover{color:var(--blue)}
.mv{font-size:15px}
.mb{grid-column:1/-1;display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.mb i{height:8px;background:var(--rule);border-radius:1px}.mb i.on{background:var(--blue)}
.meters li.few .mb i.on{background:var(--wash);outline:1px solid var(--blue);outline-offset:-1px}
.fewt{grid-column:1/-1;font-size:13px;color:var(--muted)}
/* limited evidence (M2b): an empty meter, no number */
.meters li.low .fewt{grid-column:1/-1}.meters.compact .fewt{font-size:12px}td.few{color:var(--muted)}
.meters.compact li{padding:6px 0;gap:2px 8px}.meters.compact .ml{font-size:14px;font-weight:400}.meters.compact .mv{font-size:13px}.meters.compact .mb i{height:6px}
.buy{margin-top:20px}.buy p{margin:0 0 10px;font-size:16px}
/* MSRP only (M2b): the price and its source, no button */
.buy p.bsrc{margin:-6px 0 0;font-size:14px;color:var(--muted)}.buy p.bsrc a{color:var(--muted)}

/* top of story */
.lede{font-size:clamp(22px,2.4vw,28px);line-height:1.4;margin:4px 0 28px;max-width:40ch}
.bs{display:grid;gap:18px;padding:22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
@media(min-width:700px){.bs{grid-template-columns:1fr 1fr;gap:36px}}
.bs h2{font-size:24px;margin-bottom:6px}.bs p{margin:0}
section.blk{margin-top:56px}
section.blk>h2{font-size:clamp(28px,3vw,36px);margin-bottom:18px}
.vbs{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.vb{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start}
@media(min-width:700px){.vb{grid-template-columns:200px 1fr;gap:24px}}
.vbpic img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;display:block}
.artpic{display:flex;aspect-ratio:16/9;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--rule);font-size:13px;color:var(--muted);text-align:center;padding:6px}
.vb h3{font-size:24px;margin-bottom:6px}.vb p{margin:0;max-width:62ch}

/* the story: one readable column */
.story .byl,.byl{font-size:15px;color:var(--muted);margin:-8px 0 18px}
.story .intro{font-size:21px;line-height:1.55;max-width:62ch;margin:0}
.ch{margin-top:44px}
.ch h3{font-size:clamp(26px,2.8vw,32px);margin-bottom:12px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.chs{font-size:15px;color:var(--blue);border:1px solid var(--blue);border-radius:2px;padding:2px 6px;font-weight:600}.chs small{font-size:11px;color:var(--muted)}
.ch p{max-width:66ch;margin:0 0 18px;font-size:19px;line-height:1.65}
.ch p strong{font-weight:700}
.vd{font-size:21px!important;line-height:1.55!important}
.pq{margin:28px 0;padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;max-width:66ch}
.pq img{grid-row:1/span 2;width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.pq.nopic{grid-template-columns:1fr}
.pq blockquote{margin:0;font-family:var(--display);font-variation-settings:"wdth" 75;font-size:clamp(22px,2.4vw,28px);line-height:1.2}
.pq figcaption{font-size:14px}
.src{font:400 13px var(--mono);color:var(--brass);text-decoration:none;border-bottom:1px solid currentColor}
/* footnote chip: a small chip inside a 44px tap target (M2b, D12); negative margins keep the line as it was */
a.fn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;margin:-15px -15px -15px -13px;vertical-align:-.1em;position:relative;top:-.45em;text-decoration:none;outline-offset:-12px}
a.fn span{font:600 11px/1.2 var(--mono);color:var(--brass);border:1px solid var(--brass);border-radius:2px;padding:0 3px}
a.fn:hover span,a.fn[aria-expanded=true] span{background:var(--brass);color:var(--ground)}
.fnpop{display:block;margin:-8px 0 18px;max-width:66ch;padding:10px 12px;background:var(--panel);border-radius:2px;font-size:15px}
.fnpop a,.nb a{font:13px var(--mono);color:var(--brass);margin-right:6px}
ol.notes{list-style:none;margin:0;padding:0;font-size:14px}
ol.notes li{display:grid;grid-template-columns:28px 1fr;padding:6px 0;border-top:1px solid var(--rule)}
.nn{font:600 12px var(--mono);color:var(--brass)}
details{border-top:1px solid var(--rule);margin-top:18px}
details>summary{cursor:pointer;color:var(--blue);font-weight:700;min-height:48px;display:flex;align-items:center;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"+";font-family:var(--mono);width:1.4em}details[open]>summary::before{content:"−"}
/* disagreement (M2b): an argued item opens to both positions, each source named with its quote */
details.sides{margin-top:8px;max-width:62ch}details.sides>summary{font-size:16px;min-height:44px}
.sides-in{display:grid;gap:4px 24px;padding:0 0 12px}@media(min-width:700px){.sides-in{grid-template-columns:1fr 1fr}}
.sides-in h4{margin:6px 0 4px;font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sides-in ul{list-style:none;margin:0;padding:0}.sides-in li{font-size:15px;line-height:1.5;padding:6px 0;border-top:1px solid var(--rule)}
.sides-in li a{display:inline-block;margin-right:4px;font:13px var(--mono);color:var(--brass)}
.sides-in li a{font-family:var(--body);color:var(--ink)}details.sides{border-radius:0!important}

/* specs, prices, sources */
.specs{display:grid;gap:24px;align-items:center}@media(min-width:800px){.specs{grid-template-columns:1fr 1fr}}
.specs img{background:#fff;border-radius:2px;width:100%}
/* no hero media (M2b, D7): a plain panel, no white frame, caption or thumbnails */
.gstage.ph{display:flex;align-items:center;justify-content:center;background:var(--panel);aspect-ratio:3/2}.gstage.ph span{color:var(--muted);font-size:15px}
.specs.noimg{grid-template-columns:1fr!important;max-width:720px}
table{border-collapse:collapse;width:100%;font-size:16px}
th{text-align:left;font-weight:600;color:var(--muted);padding:9px 12px 9px 0;vertical-align:top}
td{padding:9px 0;vertical-align:top}tr{border-bottom:1px solid var(--rule)}
.specs th{width:42%}
.rt{max-width:560px}.num{text-align:right;padding-right:16px}
.strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.strip img{width:160px;height:90px;object-fit:cover;border-radius:2px;display:block;flex:none}
.strip{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.strip>a{flex:none;scroll-snap-align:start}
.strip img{max-width:none}
.strip .smore{width:160px;height:90px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:2px;color:var(--blue);font-weight:700;text-decoration:none}
.exam{font-size:20px;margin:0 0 14px}
.srcs{list-style:none;margin:0 0 10px;padding:0}
.srcs li{padding:10px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:70px 1fr;gap:2px 12px}
.sk{font:600 12px var(--mono);color:var(--muted);grid-row:1/span 2;padding-top:4px}
.sm{font-size:14px;color:var(--muted)}
.cmps{display:grid;gap:12px}@media(min-width:700px){.cmps{grid-template-columns:1fr 1fr}}
.cmpl{display:flex;align-items:center;gap:14px;background:var(--panel);border-radius:2px;padding:10px;text-decoration:none;color:var(--ink)}
.cmpl img{width:120px;height:80px;object-fit:contain;background:#fff;border-radius:2px;flex:none}
.cmpl:hover span{color:var(--blue)}

/* compare */
.cmphead{display:grid;gap:16px;align-items:start;grid-template-columns:1fr auto 1fr;margin-top:8px}
.ch2 img{background:#fff;border-radius:2px;width:100%;aspect-ratio:3/2;object-fit:contain;padding:4%}
.ch2 h2{font-size:clamp(22px,2.6vw,32px);margin-top:12px}.ch2 h2 a{color:var(--ink);text-decoration:none}
.ch2 .tag{font-size:20px;margin:6px 0}.pr{font-size:15px;color:var(--muted);margin:6px 0 0}
.vs{font:800 22px var(--display);color:var(--muted);align-self:center}
.pick{display:grid;gap:18px}@media(min-width:700px){.pick{grid-template-columns:1fr 1fr;gap:36px}}
.pick h3{font-size:24px;margin-bottom:6px}.pick p{margin:0}
.ctab{max-width:820px}.ctab th{text-align:center;color:var(--ink);font-weight:600;width:24%;padding:10px 8px}
.ctab td{padding:10px 0;vertical-align:middle}.ctab .sa{text-align:right;padding-right:10px;width:9%}.ctab .sb{padding-left:10px;width:9%}
.cb{display:flex;height:10px;background:var(--rule);border-radius:1px;overflow:hidden}.cb i{display:block;background:var(--blue)}
.cb.l{justify-content:flex-end}
tr.wa .sa,tr.wb .sb{color:var(--blue)}tr.wa .cb.l i,tr.wb .cb.r i{background:var(--blue)}tr.wa .cb.r i,tr.wb .cb.l i{background:var(--muted)}
.diffs{margin:0;padding-left:20px;max-width:70ch}.diffs li{margin-bottom:12px}.diffs .muted{display:block;font-size:15px}
.cspec th{text-align:center;width:28%}.cspec td{width:36%}.cspec td:last-child{text-align:right}
.cpick{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 8px}
.cpick select{font:16px var(--body);min-height:44px;padding:0 10px;border:1px solid var(--ink);border-radius:2px;background:var(--panel);color:var(--ink);max-width:100%}
.pairs{display:grid;gap:16px}@media(min-width:700px){.pairs{grid-template-columns:repeat(3,1fr)}}
.pair{display:block;background:var(--panel);border-radius:2px;padding:12px;text-decoration:none;color:var(--ink)}
.pimgs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pimgs img{background:#fff;border-radius:2px;aspect-ratio:3/2;object-fit:contain;padding:6%}
.pt{display:block;font:700 22px/1.15 var(--display);font-variation-settings:"wdth" 75;margin-top:10px}.ps{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.pair:hover .pt{color:var(--blue)}

/* best-of A */
.bolist2{list-style:none;margin:28px 0 0;padding:0}
.bo2{display:grid;gap:20px;padding:32px 0;border-top:1px solid var(--ink)}
@media(min-width:1000px){.bo2{grid-template-columns:360px minmax(0,1fr) 260px;gap:36px}}
.boimg img{background:#fff;border-radius:2px;width:100%;aspect-ratio:3/2;object-fit:contain;padding:4%}
.botxt h2{font-size:clamp(30px,3.4vw,40px)}.botxt h2 a{color:var(--ink);text-decoration:none}.botxt p{max-width:58ch}
.rank{font-size:14px;color:var(--muted);margin:0 0 6px}
/* best-of B */
.picks{display:grid;gap:16px;margin-top:28px}@media(min-width:800px){.picks{grid-template-columns:repeat(3,1fr)}}
.pk{background:var(--panel);padding:20px;border-radius:2px}.pk h3{font-size:26px;margin-bottom:8px}.pk h3 a{color:var(--ink);text-decoration:none}.pk p{margin:0;font-size:16px}
.tscroll{overflow-x:auto}
.bot{min-width:640px}.bot thead th{vertical-align:bottom;text-align:left;color:var(--ink)}
.bot thead img{display:block;width:100%;max-width:200px;aspect-ratio:3/2;object-fit:contain;background:#fff;border-radius:2px;padding:4%}
.bot thead a{text-decoration:none;color:var(--ink);font:700 20px/1.1 var(--display);font-variation-settings:"wdth" 75}
.bot thead a span{display:block;margin-top:8px}.big{display:block;font-size:34px;color:var(--blue);margin-top:4px}
.bot td{padding:10px 16px 10px 0;width:28%}.bot td .n{font-size:14px;display:block}.bot .tl{font-size:16px}
.optnote{margin-top:40px;font-size:14px;color:var(--muted);border-top:1px dashed var(--rule);padding-top:12px}

/* hub */
.hero2{display:grid;gap:28px;align-items:center;margin-top:24px}@media(min-width:1000px){.hero2:has(>.hh-art){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
/* Category pages have no hero art: the intro uses the full width (owner 2026-11-12), lines kept readable. */
.hero2:not(:has(>.hh-art)) .cat-lede{max-width:none}.hero2:not(:has(>.hh-art)) .cat-sub{max-width:100ch}
.hero2 h1{font-size:clamp(40px,5.4vw,64px)}
.feat{display:block;position:relative;background:#fff;border-radius:2px;text-decoration:none;color:#15191A;aspect-ratio:3/2;overflow:hidden}
.feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6% 6% 26%}
.ft{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;display:grid;grid-template-columns:1fr auto;align-items:end;background:linear-gradient(transparent,rgba(255,255,255,.95) 30%)}
.ft .rank{grid-column:1;color:#5A625F}.ft b{grid-column:1;font:700 26px/1.1 var(--display);font-variation-settings:"wdth" 75}.ft .tag{grid-column:1;font-size:18px;margin:2px 0 0;color:#5A625F}
.ft .score{grid-column:2;grid-row:1/span 3;font-size:56px;color:#1E33C8}
.mcards{list-style:none;margin:0;padding:0;display:grid;gap:0}
.mc{display:grid;gap:16px;padding:22px 0;border-top:1px solid var(--rule);grid-template-columns:140px 1fr}
@media(min-width:800px){.mc{grid-template-columns:240px minmax(0,1fr) 180px;gap:28px;align-items:center}}
.mc img{background:#fff;border-radius:2px;width:100%;aspect-ratio:3/2;object-fit:contain;padding:4%}
.mc h3{font-size:30px}.mc h3 a{color:var(--ink);text-decoration:none}.mc .tag{font-size:20px;margin:4px 0}.mc p{margin:0;font-size:16px;max-width:56ch}
.mcs{grid-column:2}@media(min-width:800px){.mcs{grid-column:auto;text-align:right}}
.mcs .score{font-size:44px;color:var(--blue)}.mcs .pr{display:block}
.two{display:grid;gap:40px}@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:64px}}
.two h2{font-size:clamp(28px,3vw,36px);margin-bottom:14px}
.plinks{list-style:none;margin:0;padding:0}.plinks .pmore details{border:0;margin:0}.plinks .pmore summary{min-height:44px}.plinks li{border-top:1px solid var(--rule)}.plinks a{display:block;padding:12px 0;font-size:19px}
/* compare index grouped by model (M2b, D6) */
.cgroups{display:grid;gap:28px 40px}@media(min-width:800px){.cgroups{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}
.cgroup h3{font-size:24px;margin:0 0 6px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}.cgroup h3 a{color:var(--ink);text-decoration:none}.cgroup h3 .n{font-size:18px;color:var(--muted)}
.cgroup .plinks li{display:flex;justify-content:space-between;align-items:center;gap:12px}.cgroup .plinks a{font-size:17px;flex:1;min-height:44px;display:flex;align-items:center;padding:6px 0}.cgroup .plinks .n{font-size:14px;color:var(--muted);white-space:nowrap}
.how{margin:0;padding-left:22px}.how li{margin-bottom:12px}

/* method + editors */
.method{max-width:70ch}.method p{font-size:19px;line-height:1.65}

/* footer */
.foot{margin-top:72px;padding:32px 0 56px;border-top:1px solid var(--ink);display:grid;gap:18px}
@media(min-width:800px){.foot{grid-template-columns:1fr auto}}
.foot p{margin:12px 0 0;font-size:15px;color:var(--muted);max-width:52ch}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px}.foot nav a{color:var(--ink)}
.foot .stamp{font-size:16px}
.proto{grid-column:1/-1;font-size:13px!important}

/* ---- header search ---- */
.mast{gap:12px 24px}
.search{position:relative;flex:1 1 220px;max-width:300px}
@media(max-width:999px){.search{order:3;max-width:none;flex-basis:100%}}
.search input,.bigsearch input{width:100%;font:16px var(--body);min-height:42px;padding:0 12px;border:1px solid var(--ink);border-radius:2px;background:var(--panel);color:var(--ink)}
.sres{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--ink);border-radius:2px;z-index:20;max-height:320px;overflow:auto}
.sres a{display:block;padding:10px 12px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule)}
.sres a b{display:block;font-weight:700}.sres a span{font-size:14px;color:var(--muted)}
.sres a:hover,.sres a:focus{background:var(--wash)}
.sres .none{padding:10px 12px;font-size:15px;color:var(--muted)}

/* ---- home ---- */
.home-hero{display:grid;gap:32px;align-items:center;margin-top:36px}
@media(min-width:1000px){.home-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px}}
.home-hero h1{font-size:clamp(44px,6.4vw,76px);line-height:1}
.bigsearch{position:relative;max-width:560px;margin:8px 0 14px}
.bigsearch input{min-height:56px;font-size:18px;padding:0 16px;border-width:2px}
.quick{font-size:15px;display:flex;flex-wrap:wrap;gap:6px 14px}.quick span{color:var(--muted)}
.hh-feat{display:block;position:relative;background:#fff;border-radius:2px;text-decoration:none;color:#15191A;aspect-ratio:3/2;overflow:hidden}
.hh-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6% 6% 26%}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.sechead a{font-size:16px}
.types{display:grid;gap:16px}@media(min-width:760px){.types{grid-template-columns:repeat(3,1fr)}}
.type{display:block;background:var(--panel);border-radius:2px;text-decoration:none;color:var(--ink);overflow:hidden}
.timg{display:block;background:#fff;aspect-ratio:16/9}.timg img{width:100%;height:100%;object-fit:contain;padding:6%}
.tt{display:block;font:700 30px/1.1 var(--display);font-variation-settings:"wdth" 75;padding:14px 16px 0}
.tc{display:block;padding:2px 16px 16px;color:var(--muted);font-size:15px}
.type:hover .tt{color:var(--blue)}
.needs{display:grid;gap:16px}@media(min-width:760px){.needs{grid-template-columns:repeat(2,1fr)}}@media(min-width:1100px){.needs{grid-template-columns:repeat(4,1fr)}}
.need{display:flex;flex-direction:column;background:var(--panel);border-radius:2px;text-decoration:none;color:var(--ink);overflow:hidden}
.nimg{display:block;background:#fff;aspect-ratio:3/2}.nimg img{width:100%;height:100%;object-fit:contain;padding:6%}
.nt{font:600 13px var(--mono);color:var(--blue);padding:14px 16px 0;text-transform:uppercase;letter-spacing:.03em}
.nw{font:700 24px/1.1 var(--display);font-variation-settings:"wdth" 75;padding:6px 16px 0}
.nwhy{font-size:15px;color:var(--muted);padding:6px 16px 0}
.ns{font-size:14px;padding:10px 16px 16px;margin-top:auto}.ns .n{color:var(--blue);font-size:18px}
.need:hover .nw{color:var(--blue)}
.latest .ld{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.cgroup .plinks a b,.plinks a b{margin:0 .3em}
.pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.pager a,.pager span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--rule)}.pager span[aria-current]{font-weight:700;border-color:var(--ink)}
.latest{list-style:none;margin:0;padding:0;display:grid;gap:16px}@media(min-width:700px){.latest{grid-template-columns:repeat(3,1fr)}}
.lc a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.limg{display:block;background:#fff;border-radius:2px;aspect-ratio:3/2}.limg img{width:100%;height:100%;object-fit:contain;padding:6%}
.lt{font:700 24px/1.1 var(--display);font-variation-settings:"wdth" 75;margin-top:12px}
.lc .tag{font-size:18px;margin:4px 0 0;color:var(--muted)}
.ls{font-size:15px;color:var(--muted);margin-top:4px}.ls .n{color:var(--blue);font-size:20px}
.lc a:hover .lt{color:var(--blue)}
.who{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.who{grid-template-columns:repeat(4,1fr)}}@media(min-width:1100px){.who{grid-template-columns:repeat(6,1fr)}}
.who a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:600;background:var(--panel);padding:8px;border-radius:2px}
.who img{width:64px;height:36px;object-fit:cover;border-radius:2px;flex:none}
.wart{display:inline-flex;align-items:center;justify-content:center;width:64px;height:36px;font:11px var(--mono);color:var(--muted);border:1px solid var(--rule);border-radius:2px;flex:none}
.wart.big{width:160px;height:90px}
.how3{list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:h}@media(min-width:800px){.how3{grid-template-columns:repeat(3,1fr)}}
.how3 li{border-top:2px solid var(--ink);padding-top:12px}.how3 b{display:block;font:700 24px/1.15 var(--display);font-variation-settings:"wdth" 75;margin-bottom:6px}.how3 span{color:var(--muted)}

/* ---- type hub, categories, who we read ---- */
.typehead{display:grid;gap:24px;align-items:center;margin-top:8px}@media(min-width:900px){.typehead{grid-template-columns:1fr 1fr}}
.typehead img{background:#fff;border-radius:2px;width:100%;aspect-ratio:16/9;object-fit:contain;padding:4%}
.cats{display:grid;gap:14px}@media(min-width:700px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{display:flex;flex-direction:column;gap:4px;background:var(--panel);border-radius:2px;padding:16px;text-decoration:none;color:var(--ink);min-height:120px}
.cat .ct{font:700 24px/1.1 var(--display);font-variation-settings:"wdth" 75}.cat .cc{font-size:14px;color:var(--muted);margin-top:auto}
.cat .cw{font-size:15px;color:var(--muted)}
.cat.live{border:2px solid var(--blue)}.cat.live .cc{color:var(--blue);font-weight:600}.cat.live:hover .ct{color:var(--blue)}
.cat.soon{opacity:.75}
.cimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:8px}.cimgs img{background:#fff;border-radius:2px;aspect-ratio:3/2;object-fit:contain;padding:6%}
.rlist{list-style:none;margin:0;padding:0}
.rlist li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--rule);align-items:center}
@media(min-width:700px){.rlist li{grid-template-columns:160px 1fr}}
.rlist img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}.rlist h3{font-size:24px}.rlist p{margin:4px 0 0}
/* fixed-ratio image boxes: the image never sets the box height */
.limg,.nimg,.timg,.cimgs img{position:relative;overflow:hidden}
.limg img,.nimg img,.timg img{position:absolute;inset:0}
@media(max-width:699px){.hh-feat{aspect-ratio:4/3}.hh-feat img{padding:4% 10% 42%}.feat img{padding:4% 10% 40%}}
/* header search stays on every page so the header never shifts (owner, 2026-11-11) */
.who a span small{display:block;font:400 12px var(--mono);color:var(--muted)}
.rstats{display:flex;flex-wrap:wrap;gap:4px 18px;margin:6px 0 2px;font-size:15px;color:var(--muted)}.rstats b{color:var(--ink)}
.rlist h3 a{color:var(--ink);text-decoration:none}.rlist h3 a:hover{color:var(--blue)}
.lede+.summary{margin-top:-12px}
.summary{font-size:20px;line-height:1.6;max-width:62ch;margin:0 0 28px}

/* ================= Espresso Rated layer ================= */
:root{--ground:#FFFFFF;--panel:#E9ECEE;--ink:#1A1716;--muted:#5F6468;--rule:#CDD2D6;--blue:#1A1716;--wash:#D7DBDE;--brass:#1A1716;--on-blue:#FFFFFF;
--gauge:#D23B2B;--gauge-text:#C23627;--moss:#4F6B3A;--amber:#9F5C0C;--track:#D3D8DB;
--display:"Bodoni Moda",serif;--body:"Public Sans",sans-serif;--mono:"Public Sans",sans-serif}
@media (prefers-color-scheme:dark){:root{--ground:#14110F;--panel:#1F1B19;--ink:#EDEAE7;--muted:#A9AFB4;--rule:#363130;--blue:#EDEAE7;--wash:#2A2523;--brass:#EDEAE7;--on-blue:#14110F;--gauge:#FF6A58;--gauge-text:#FF6A58;--moss:#7CC39A;--amber:#F0A54A;--track:#3A3532}}
body{font-variant-numeric:tabular-nums}
h1,h2,h3,.tag,.tt,.nw,.lt,.pt,.ft b,.ch3 h3,.pq blockquote,.vb h3,.how3 b,.ct{font-family:var(--display)!important;font-variation-settings:normal!important;letter-spacing:-.01em}
.n{font-family:var(--body);font-weight:700}
/* wordmark */
.logo{font:700 28px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.logo{display:inline-flex;align-items:baseline}
.nav a{font-weight:600;font-size:16px}
.search input,.bigsearch input{border-radius:2px;border-width:2px;background:var(--ground)}
.sres{border-radius:2px;overflow:hidden}
/* shapes: soft */
.btn{border-radius:2px;background:var(--ink);color:var(--ground)}
.gstage,.gal,.specs img,.hh-feat,.feat,.type,.need,.limg,.nimg,.timg,.cmpl,.pair,.pk,.cat,.bs,.pq,.fnpop,details,.who a,.boimg img,.mc img,.ch2 img{border-radius:2px!important}
.gt,.gt img,.vbpic img,.pq img,.strip img,.rlist img,.who img,.cmpl img,.pimgs img,.bot thead img,.cimgs img{border-radius:2px!important}
.gstage{background:#fff}
.gt.on{border-color:var(--ink)}
.gcap{border-radius:2px;padding:3px 10px}
/* hero column: gallery + care label */
.heroc{grid-area:hero;min-width:0}.heroc .gal{grid-area:auto}
.care{margin-top:14px;background:var(--panel);border-radius:2px;padding:14px 18px;outline:2px dashed var(--rule);outline-offset:-8px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:16px}
.care span{display:inline-flex;align-items:center;gap:8px}
/* a note beside a ranked model (superseded, in its grace period) */
.rwarn{margin:4px 0 10px;font-size:15px;line-height:1.45}
span.rwarn{display:block;margin:8px 0 0;font-size:14px;color:var(--ink)}
.need .rwarn{margin:0;padding:8px 16px 0;font-size:14px}
/* score block */
.bw{margin:16px 2px 8px}
/* meters: rounded continuous bars on an oat panel */
.meters{border:0;background:var(--panel);border-radius:2px;padding:12px 18px}
.meters li{border:0;padding:7px 0}
.mb{display:block;height:10px;border-radius:2px;background:var(--track);overflow:hidden;position:relative;gap:0}
.mb i{display:none}
.mb::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--ink);border-radius:2px}
.meters li.few .mb::after{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.meters li.low .mb{background:transparent;box-shadow:inset 0 0 0 2px var(--track)}
.meters.compact{padding:8px 12px}
/* chips and receipts */
.chs{background:none;color:var(--muted);border:0;border-radius:2px;padding:3px 10px;font-family:var(--body)}.chs small{color:var(--muted)}
a.fn span{background:var(--panel);border:0;border-radius:2px;color:var(--ink);font-family:var(--body);padding:1px 4px}
a.fn:hover span,a.fn[aria-expanded=true] span{background:var(--ink);color:var(--ground)}
.src,.fnpop a,.nb a,.nn{color:var(--ink);font-family:var(--body)}
.bs{border:0;gap:14px;padding:0}.bs>div{background:var(--panel);border-radius:2px;padding:18px 20px}
.pq{background:var(--panel);border:0;padding:18px;border-radius:2px}
.lede{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.8vw,32px);line-height:1.25}
.home-hero .lede,.typehead .lede,.method~.lede,main>.lede{font-family:var(--body);font-weight:400;font-size:clamp(20px,2.2vw,24px)}
.need .nt{font-family:var(--body);color:var(--ink);background:var(--panel);align-self:flex-start;margin:14px 16px 0;padding:3px 10px;border-radius:2px;text-transform:none;letter-spacing:0;font-weight:700}
.mcs .score,.ls .n,.ns .n,.big,.ft .score{color:var(--ink)}
.type.soon{display:flex;flex-direction:column;justify-content:flex-end;min-height:160px;padding:16px}.type.soon .tt,.type.soon .tc{padding:0}
.cat.live{border-color:var(--ink)}.cat.live .cc{color:var(--ink)}
.cb{border-radius:2px}.cb i{background:var(--ink);border-radius:2px}
tr.wa .sa,tr.wb .sb{color:var(--ink);font-weight:700}
.foot{border-top:2px solid var(--ink)}

.who{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:700px){.who{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(min-width:1100px){.who{grid-template-columns:repeat(6,minmax(0,1fr))}}
.who li,.who a span{min-width:0}.who a span{overflow-wrap:anywhere}

.bw{display:grid;grid-template-columns:auto 1fr;gap:4px 14px}.bw span{min-width:0}.bw b{font-weight:400}

/* channel avatars */
.av{border-radius:50%!important;object-fit:cover;flex:none;background:var(--panel);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink)}
.who a{gap:10px}.who .av{width:44px;height:44px}
.rlist li{grid-template-columns:88px 1fr}.rlist .av{width:88px;height:88px;aspect-ratio:1}
.av.ini{font-size:15px;border:1px solid var(--rule)}

/* hero art + "What matters most to you?" row */
.home-hero{align-items:start}
.hh-art{margin:0}.hh-art img{display:block;width:100%;height:auto;border-radius:2px;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 72%,transparent 100%)}

.rlist .av,.who .av{border-radius:50%!important}

.ctab td:nth-child(2),.ctab td:nth-child(4){width:29%}
/* the answer comes before the meters on phones and tablets */
.ledebox{grid-area:lede;min-width:0}
.grid{grid-template-areas:"hero" "lede" "rail" "body"}
@media(min-width:1000px){.grid{grid-template-areas:"hero rail" "lede rail" "body rail"}}

.ft .rank,.ft .tag{color:#5F6468}

/* 44px tap targets */
.nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 2px}
.search input,.cpick select{min-height:44px}
.chip{min-height:44px}
.ml a{display:inline-block;padding:6px 0;margin:-6px 0}

@media(max-width:699px){.nav{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;gap:0 18px}.nav::-webkit-scrollbar{display:none}.nav a{flex:none}}

@media(max-width:479px){.vb{grid-template-columns:1fr;gap:10px}.vbpic{max-width:100%}}

.hh-feat .of,.feat .of,.ft .of{color:#5F6468}

@media(min-width:900px){.types{grid-template-columns:2fr 1fr 1fr 1fr}}
.type.soon{min-height:0;justify-content:flex-start;padding:18px}.type.soon .tt{font-size:24px}

.rlist h2.rh{font-size:24px}
input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.types{align-items:start}
/* brand pages */
.by{margin:4px 0 0;font-size:17px;color:var(--muted)}.by a{color:var(--ink);font-weight:600}
.brandhead{display:grid;gap:24px;align-items:start;margin-top:12px}@media(min-width:760px){.brandhead{grid-template-columns:160px 1fr;gap:40px}}
.bmark{display:flex;align-items:center;justify-content:center;width:160px;height:160px;background:#fff;border-radius:2px;overflow:hidden}
.bmark img{width:96px;height:96px;object-fit:contain}
.bmark.word{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.05;text-align:center;padding:16px;color:#1A1716}
.bmark.sm{width:72px;height:72px;flex:none}.bmark.sm img{width:48px;height:48px}.bmark.sm.word{font-size:13px;padding:6px}
.bfacts{display:flex;flex-wrap:wrap;gap:8px 32px;margin:0;font-size:16px}.bfacts dt{color:var(--muted);font-size:14px}.bfacts dd{margin:0;font-weight:600}
.brandlist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}@media(min-width:700px){.brandlist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.brandcard{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;align-items:center;background:var(--panel);padding:14px;border-radius:2px;text-decoration:none;color:var(--ink)}
.brandcard .bmark{grid-row:1/span 2}.bn{font:700 22px/1.1 var(--display);align-self:end}.bc{font-size:14px;color:var(--muted);align-self:start}
.brandcard:hover .bn{text-decoration:underline}

.bmark,.brandcard{border-radius:2px}.bmark.sm{border-radius:2px}.bmark.word{color:#1A1716}
/* type outlines (inline SVG, currentColor) */
.timg.ico{display:flex;align-items:center;justify-content:center;color:var(--ink);background:#fff}
.timg.ico svg{width:70%;height:auto;max-height:86%}
.tico{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:2px;aspect-ratio:16/9;color:#1A1716}
.tico svg{width:72%;height:auto}.tico.sm{width:160px;aspect-ratio:16/9;margin-top:12px}
.timg.ico{color:#1A1716}.tico{border-radius:2px;color:#1A1716}
.type.soon .timg.ico{aspect-ratio:16/9;background:#fff;border-radius:2px 16px 0 0;margin:-18px -18px 12px}
.type.soon .timg.ico svg{width:62%;opacity:.55}
@media(min-width:900px){.types{grid-template-columns:repeat(4,1fr)}}
.type.soon{padding:18px}
/* generated type outlines (art/types/*.webp) */
.timg.ico img{position:static;width:100%;height:100%;object-fit:contain;padding:4%}
.tico img{width:100%;height:auto;display:block}
.type.soon .timg.ico img{opacity:.55}
.timg.ico img,.tico img{mix-blend-mode:multiply;filter:brightness(1.04) contrast(1.08)}
.timg.ico img{padding:0;transform:scale(1.18);transform-origin:50% 52%}.tico img{transform:scale(1.18)}.tico{overflow:hidden}.type.soon .timg.ico img{opacity:.7}

/* paired calls to action: primary + outline */
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.ctaprice{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:16px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{filter:none;background:var(--ink);color:var(--ground)}

/* latest reviews: score overlaid top right on the image, as a gauge chip */

/* model page H1: "<name> review", the word review quieter than the name */
h1 .rv{color:inherit;font-weight:inherit}  /* owner, 2026-11-11: same colour as the name */

/* model list rows: facts line under the story; score alone on the right */
.mfacts{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:10px!important;font-size:15px!important;color:var(--muted)}
.mfacts span+span::before{content:"·";margin:0 8px}
.mfacts b{color:var(--ink);font-weight:700}
.mcs{text-decoration:none;justify-self:start}
@media(min-width:800px){.mcs{justify-self:end}}
@media(min-width:800px){.mc{grid-template-columns:240px minmax(0,1fr) auto}}
/* "Top rated" card: same gauge chip */
/* phones: score block tucks under the photo, smaller */
@media(max-width:799px){.mc>div{grid-row:span 2}.mcs{grid-column:1;grid-row:2;align-self:start;padding:8px 12px 10px;border-radius:2px}.mcs .score{font-size:30px}.mcs .of{font-size:13px}}
@media(max-width:799px){.mc{grid-template-rows:auto 1fr;row-gap:12px}}
/* ranked lists (category + need pages): gauge chip, like everywhere else */
.why{margin:6px 0 10px!important}.tip{background:var(--panel);border-radius:2px;padding:12px 16px;max-width:66ch}
.skiplist{padding-left:20px}.skiplist li{margin:6px 0}
/* category page head: one plain lede, a smaller second line, an illustration (not a product) on the right */
.cat-lede{font:400 clamp(21px,2.2vw,25px)/1.4 var(--body);margin:8px 0 10px;max-width:36ch}
.cat-sub{font-size:17px;line-height:1.55;color:var(--muted);margin:0 0 18px;max-width:52ch}
.hero2 .hh-art{margin:0}
/* picks by need: every need on one row on desktop; a swipeable strip on phones */
@media(min-width:1100px){.needs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
@media(min-width:1100px){.needs .nw{font-size:21px}.needs .nwhy{font-size:14px}}
@media(max-width:1099px){.needs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;scrollbar-width:thin}.needs .need{flex:0 0 min(72%,280px);scroll-snap-align:start}}
/* Browse by type: every tile the same shape; "coming soon" differs only in its label and a lighter drawing */
.types{align-items:stretch}
.type,.type.soon{display:flex;flex-direction:column;padding:0;min-height:0}
.type.soon .timg.ico{margin:0;border-radius:0}
.type .tt,.type.soon .tt{font-size:28px;padding:16px 18px 0}
.type .tc,.type.soon .tc{padding:4px 18px 18px}
/* "Who each one is for": one card per winning model, its needs as tags */
.needs.grouped{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-auto-flow:row;grid-auto-columns:auto}
@media(min-width:1100px){.needs.grouped{grid-template-columns:repeat(3,minmax(0,1fr))}}
.need.grp .nw{text-decoration:none;color:var(--ink)}.need.grp .nw:hover{color:var(--blue)}
.ntags{display:flex;flex-wrap:wrap;gap:6px;padding:14px 16px 0}.ntags .nt{margin:0!important;padding:3px 10px;text-decoration:none}
a.nt:hover{text-decoration:underline}
.need.grp .nwhy{color:var(--ink);font-size:15px}
/* section heads with a "See all" link: same gap to the content as a plain h2 */
.sechead{margin-bottom:18px}.sechead h2{margin-bottom:0}.sechead+.sm2{margin-top:-10px!important;margin-bottom:16px}
/* Who we read: every box the same height, across rows too */
.who{grid-auto-rows:1fr}.who li{display:flex}.who a{flex:1}
.strip .smore{border-radius:2px}

/* guides (owner, 2026-11-12, layout v3): one column. Breadcrumb, title, dek, byline, hero, "In short",
   the text, illustrations, figures, pull quotes, "Where to start" and the footnotes all share one
   width (--gm) on one left and one right edge, centred. The column is as wide as a comfortable line
   (about 75 characters at --gfs), and the pictures come in to it rather than the text going out to
   them. One vertical rhythm: --gs between sections, --gf around pictures and figures. */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gpage{--gm:760px;--gs:64px;--gf:40px;--gfs:22px}
.gpage .crumbs,.guide{width:min(100%,var(--gm));margin-left:auto;margin-right:auto}
.guide>*,.guide .gbody>.gsec>*{max-width:none;min-width:0}
.ghead{padding-top:14px}.ghead h1{margin:0 0 14px;max-width:none;text-wrap:balance}
.ghead .lede{margin:0 0 14px;max-width:none;text-wrap:balance}
.ghead .byl{margin:0;color:var(--muted)}
.guide>.ghero{margin:36px 0 0}
.guide>.inshort{margin-top:var(--gf)}
.guide .gbody{max-width:none}
.gbody p{font-size:var(--gfs);line-height:1.65;margin:0 0 1.05em}
.gsec{margin-top:var(--gs)}.gsec.gopen{margin-top:var(--gf)}
.gsec h2{font-size:clamp(26px,3vw,34px);margin:0 0 14px}
.gsec ul{padding-left:1.2em;margin:0 0 1.2em}.gsec li{margin:.4em 0;font-size:calc(var(--gfs) - 1px);line-height:1.55}
.gimg,.ig{margin:var(--gf) 0}
.ghero img,.gimg img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px;background:#fff}
.ghero figcaption,.gimg figcaption,.ig figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:left}
/* figure plates: the drawing (360 units wide) sits centred on a panel as wide as the column */
.ig{background:var(--panel);border-radius:2px;padding:28px 16px}
.ig .ig-svg{max-width:520px;margin:0 auto}
.ig figcaption{max-width:520px;margin-left:auto;margin-right:auto}
.inshort{background:var(--panel);border-left:4px solid var(--blue);border-radius:2px;padding:20px 28px 18px}
.inshort h2{font:600 13px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px}
.inshort ul{margin:0;padding-left:1.1em}.inshort li{font-size:calc(var(--gfs) - 1px);line-height:1.5;margin:.45em 0}
.gpq{margin:var(--gf) 0;max-width:none}
.ig-svg{display:block;width:100%;height:auto;background:var(--panel);border-radius:2px}
.ig-title{font-family:var(--display);font-weight:700;fill:var(--ink)}
.ig-label{fill:var(--ink);font-family:var(--body);font-weight:600}
.ig-detail,.ig-tick,.ig-axis,.ig-note{fill:var(--muted);font-family:var(--body)}
.ig-value,.ig-num{fill:var(--ink);font-family:var(--mono);font-weight:600}
.ig-bar,.ig-dot,.ig-arrow{fill:var(--blue)}.ig-track{fill:var(--wash)}
.ig-grid{stroke:var(--rule);stroke-width:1}.ig-axisline{stroke:var(--muted);stroke-width:1}
.ig-spine{stroke:var(--blue);stroke-width:2}
.ig-box{fill:none;stroke:var(--blue);stroke-width:2}
.ig-qbox{fill:var(--ground);stroke:var(--rule);stroke-width:1}
.ig-q{fill:var(--ink);font-family:var(--display);font-weight:700}
.gstart{margin-top:calc(var(--gs) + 8px)}.gstart h2,.gsrc h2{font-size:clamp(28px,3vw,36px);margin:0 0 8px}
.gstart>.sm2,.gsrc>.sm2{margin:0 0 20px}
/* "Where to start": product cards as rows in the column (picture left, name, who it's for, score) */
.gpicks{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.gpicks li{display:flex}
.gpick{flex:1;display:grid;grid-template-columns:112px 1fr;grid-template-rows:auto 1fr auto;gap:2px 14px;align-items:start;background:var(--panel);border-radius:2px;padding:12px 16px 12px 12px;text-decoration:none;color:var(--ink)}
.gpick img{grid-row:1/-1;align-self:center;width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff;border-radius:2px}
.gpick img.cover{object-fit:cover;background:var(--panel)}
.gpick.nopic{grid-template-columns:1fr;padding-left:16px}
@media(min-width:560px){.gpick{grid-template-columns:200px 1fr;gap:4px 22px;padding:14px 22px 14px 14px}.gpick.nopic{padding-left:22px}}
.gpn{font:700 clamp(20px,2.4vw,24px)/1.1 var(--display);font-variation-settings:"wdth" 75;margin-top:2px}
.gpw{font-size:clamp(15px,1.8vw,17px);line-height:1.45}
.gps{padding-top:8px;font:600 14px var(--mono);color:var(--muted)}.gps b{color:var(--blue);font-size:18px}
.gpick:hover .gpn{color:var(--blue)}
.gsrc{margin-top:var(--gs);padding-top:28px;border-top:1px solid var(--rule)}
.gsrc .srcs{display:grid;gap:0 32px;grid-template-columns:1fr}
.gsrc .srcs li{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-top:1px solid var(--rule)}
.gsrc .srcs li a{font-size:17px;line-height:1.4}
.gsrc .srcs li span{font-size:14px;color:var(--muted)}
.gsrc .gnotes{margin:0 0 8px;border-top:0;border-radius:0!important}.gsrc .gnotes summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.gsrc .gnotes ol.notes{margin-top:12px}
.gihead{padding-top:14px;margin-bottom:28px}.gihead h1{margin:0 0 10px}.gihead .lede{margin:0;max-width:40ch}
.gcards{list-style:none;margin:0;padding:0;display:grid;gap:40px 28px;grid-template-columns:1fr}
@media(min-width:640px){.gcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.gcards{grid-template-columns:repeat(3,1fr)}.gcards:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}}
.gcards li{display:flex}
.gcard{flex:1;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.gcard img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;background:#fff;margin-bottom:6px}
.gcard img.contain{object-fit:contain;background:#fff}
.gct{font:700 26px/1.1 var(--display);font-variation-settings:"wdth" 75}
.gcw{font-size:17px;line-height:1.5;color:var(--muted)}
.gcc{font-size:14px;color:var(--muted);margin-top:auto}
.gcard:hover .gct{color:var(--blue)}
@media(max-width:759px){.gpage{--gs:48px;--gf:32px;--gfs:19px}.gpage .inshort{padding:16px 18px 14px}.ig{padding:20px 0}.ig .ig-svg{border-radius:0}.ghead h1{max-width:none}}
/* guides, two columns (owner 2026-11-12): the site's full content width. Title and hero across
   the top; below, the article (the same reading measure as before) beside a sticky "Where to start"
   rail. Phones: one column, the picks after the article and before the sources. */
.grail-page{--gw:1200px}
.grail-page .crumbs,.grail-page .guide.rail{width:min(100%,var(--gw))}
/* Phones: title, picture, article, picks, sources. Wide: title beside the picture at the top right,
   the article beside a sticky "Where to start" under the picture. */
.grail-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "hero" "main" "rail" "tail"}
.grail-grid>.ghead{grid-area:head;min-width:0}.grail-grid>.ghero-side{grid-area:hero;min-width:0}
.grail-grid>.gmain{grid-area:main;min-width:0}.grail-grid>.grail{grid-area:rail;min-width:0}.grail-grid>.gtail{grid-area:tail;min-width:0}
.ghero-side .ghero{margin:28px 0 0}
.grail-grid>.gmain>.inshort{margin-top:var(--gf)}
.grail .gstart{margin-top:var(--gs)}
@media(min-width:1100px){
  .grail-grid{grid-template-columns:minmax(0,760px) 360px;column-gap:64px;justify-content:space-between;grid-template-areas:"head hero" "main rail" "tail rail"}
  .grail-grid>.ghead{align-self:start;padding-top:0}
  .ghero-side .ghero{margin-top:0}
  .grail{align-self:start;position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px);margin-top:var(--gf)}
  .grail .gstart{margin-top:0}
  .grail .gstart h2{font-size:22px;margin:0 0 4px}
  .grail .gstart>.sm2{font-size:14px;margin:0 0 14px}
  .grail .gpicks{gap:10px}
  .grail .gpick{grid-template-columns:96px 1fr;gap:2px 14px;padding:10px 14px 10px 10px}
  .grail .gpick.nopic{grid-template-columns:1fr;padding-left:14px}
  .grail .gpn{font-size:19px}.grail .gpw{font-size:14px;line-height:1.4}
  .grail .gps{padding-top:4px;font-size:13px}.grail .gps b{font-size:16px}
}
/* guides, Espresso Rated guides layer */
.inshort{border-left:0;border-radius:2px;padding:18px 24px 16px}
.inshort h2{font:700 19px/1.2 var(--display);text-transform:none;letter-spacing:-.01em}
.ghero img,.gimg img,.gcard img,.ig{border-radius:2px}
.ig-svg,.gpick{border-radius:2px}.gpick img{border-radius:2px}
.gsrc h3{font-family:var(--body)}
.gpn,.gct{font-family:var(--display)!important;font-variation-settings:normal!important;letter-spacing:-.01em}
.gps{font-family:var(--body)}
.ig-value,.ig-num{font-family:var(--body);font-weight:700}

/* ---- header: logo left, nav and a search button right (owner, 2026-11-12) ----
   One search box per page: the header has a magnifier button that opens the field over the
   nav (desktop) or under the header (phones). Both are overlays, so the header never moves.
   Without JS (no .js on <html>) the button is hidden and the field shows in its place. */
.mast{position:relative;flex-wrap:nowrap;gap:12px 20px}
.mast .nav{margin-left:auto;flex-wrap:nowrap;min-width:0}
.msearch{position:relative;flex:none;display:flex;align-items:center}
.msearch .search{flex:none;order:0;width:300px;max-width:none}
.sbtn{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);cursor:pointer}
.sbtn:hover,.sbtn[aria-expanded=true]{background:var(--ink);color:var(--ground)}
.sbtn svg{display:block}
.js .sbtn{display:inline-flex}
.js .msearch .search{display:none;position:absolute;right:100%;top:50%;transform:translateY(-50%);z-index:30;width:336px;padding:0 8px 0 16px;background:var(--ground)}
.js .msearch.open .search{display:block}
.js .msearch .sres{left:16px;right:8px}
@media(min-width:860px){.mast.sopen .nav{visibility:hidden}}
.nav.fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
.nav.fade-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent)}
.nav.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
/* phones and narrow tablets: logo and button on top, the nav a sideways-scrolling row under them */
@media(max-width:859px){
  .mast{flex-wrap:wrap;padding-bottom:4px}
  .mast .nav{order:3;flex:1 1 100%;margin:0 -16px;padding:0 16px;overflow-x:auto;scrollbar-width:none;gap:0 14px}
  .mast .nav::-webkit-scrollbar{display:none}.mast .nav a{flex:none}
  .msearch{margin-left:auto;position:static}
  html:not(.js) .msearch{order:4;flex:1 1 100%;margin:0 0 10px}html:not(.js) .msearch .search{width:100%}
  .js .msearch .search{position:absolute;left:-16px;right:-16px;top:100%;transform:none;width:auto;padding:12px 16px 14px;border-bottom:1px solid var(--rule)}
  .js .msearch .sres{left:16px;right:16px;top:calc(100% - 10px)}
}
@media(min-width:760px) and (max-width:859px){.mast .nav{margin:0 -40px;padding:0 40px}.js .msearch .search{left:-40px;right:-40px;padding:12px 40px 14px}.js .msearch .sres{left:40px;right:40px}}

/* ---- "What matters most to you?": need chips over that need's top 3 (owner, 2026-11-12) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);font:600 15px/1.2 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.needs-strip{margin-top:28px;padding:14px 0 6px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ns-row{display:flex;align-items:center;gap:10px 16px}
.ns-q{font:700 22px/1.2 var(--display);font-variation-settings:"wdth" 75;white-space:nowrap;margin:0}
.needs-strip .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px;margin:-4px}
.needs-strip .chips::-webkit-scrollbar{display:none}
.needs-strip .chip{flex:none}
/* every panel sits in the same cell, so the tallest sets the height and switching never moves the page */
.np-panels{display:grid;margin-top:16px}
.np{grid-area:1/1;min-width:0}
.np[hidden]{display:block;visibility:hidden}
.np-picks{list-style:none;margin:0;padding:0;display:grid;gap:14px 24px;grid-template-columns:repeat(3,minmax(0,1fr))}
.np-picks a{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:3px 14px;align-items:start;text-decoration:none;color:var(--ink)}
.np-img{grid-row:1/4;display:block;aspect-ratio:3/2;background:#fff;border-radius:2px;overflow:hidden}
.np-img img{display:block;width:100%;height:100%;object-fit:contain}
.np-n{font:700 19px/1.15 var(--display);font-variation-settings:"wdth" 75}
.np-picks a:hover .np-n{color:var(--blue)}
.np-s{font-size:14px;color:var(--muted)}.np-s .n{color:var(--blue);font-size:16px}
.np-r{font-size:14px;line-height:1.4;color:var(--muted)}.np-r .nb{white-space:nowrap}
.np-more{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:15px;font-weight:600}
@media(max-width:699px){.ns-row{flex-direction:column;align-items:flex-start}.needs-strip .chips{max-width:calc(100% + 8px)}.np-picks{grid-template-columns:1fr;gap:12px}}
/* search button, chips and photo wells: square */
.sbtn{border-width:2px;border-radius:2px}.sbtn circle,.sbtn path{stroke-linecap:round}
@media(min-width:860px){.js .msearch .search{width:340px}}
.chip{border-width:2px;border-radius:2px;background:var(--ground);font-family:var(--body)}
.chip:hover{border-color:var(--ink);color:var(--ink);background:var(--panel)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.ns-q{font-size:20px;font-variation-settings:normal}
.np-n{font-family:var(--display);font-variation-settings:normal;font-size:18px}
.np-img{border-radius:2px}
.np-picks a:hover .np-n{color:var(--ink);text-decoration:underline}

/* compare page (owner 2026-11-12): category tabs over one picker, popular comparisons as cards, all collapsed */
.ctabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ctabs>input{position:absolute;opacity:0;pointer-events:none}
.ctabs>label{cursor:pointer;padding:10px 16px;border:1px solid var(--rule);border-radius:var(--ctr,2px);font-weight:600;min-height:44px;display:inline-flex;align-items:center;background:var(--panel)}
.ctabs>input:checked+label{background:var(--ink);color:var(--ground,#fff);border-color:var(--ink)}
.ctabs>input:focus-visible+label{outline:2px solid var(--blue);outline-offset:2px}
.cpanels{flex-basis:100%;margin-top:16px}
.cpanel .cpick{margin:0}
.pcards{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.pcards{grid-template-columns:repeat(3,1fr)}}
.pcards li{display:flex}
.pcard{flex:1;display:flex;flex-direction:column;gap:8px;background:var(--panel);border-radius:var(--ctr,2px);padding:12px;text-decoration:none;color:var(--ink)}
.pc-imgs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pc-imgs img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--ctr,2px);background:#fff;display:block}
.pc-n{font-weight:700;font-size:18px;line-height:1.25}.pc-n i{font-style:normal;color:var(--muted);font-weight:600;margin:0 .25em}
.pc-s{font:600 14px var(--mono);color:var(--muted)}.pc-s b{color:var(--blue);font-size:16px}
.pcard:hover .pc-n{color:var(--blue)}
.callc summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.callc h3{margin:20px 0 8px;font-size:18px}
.callc ul{list-style:none;margin:0;padding:0;columns:1;column-gap:32px}
@media(min-width:760px){.callc ul{columns:2}}@media(min-width:1100px){.callc ul{columns:3}}
.callc li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--rule)}
.ctabs,.pcard{--ctr:14px}
.cpop-h{margin:56px 0 0;font-size:clamp(28px,3.4vw,40px)}

/* home hero balance (owner 2026-11-12): headline in two lines, intro in three at desktop, so the text column
   is no taller than the illustration beside it (as on GunsReviewed) */
.home-hero h1{font-size:clamp(40px,5vw,64px);line-height:1.02;text-wrap:balance}
.home-hero .lede{margin-top:16px}

/* ===== Category page: At a glance, Best-for labels, budget pick, buying advice (SEO phase 2, 2026-11-12) ===== */
.tscroll{contain:inline-size;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:2px;max-width:100%}
.tscroll:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.glance{border-collapse:collapse;width:100%;min-width:720px;font-size:15px}
.glance th,.glance td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top;white-space:nowrap}
.glance thead th{font:600 13px/1.3 var(--body);color:var(--muted);background:var(--panel)}
.glance tbody tr:last-child th,.glance tbody tr:last-child td{border-bottom:0}
.glance tbody th{position:sticky;left:0;background:var(--ground);font-weight:600;white-space:normal;min-width:150px}
.glance thead th:nth-child(2){position:sticky;left:0;z-index:1}
.glance tbody th a{color:var(--ink)}
.glance .num{text-align:right}
.budget{background:var(--panel);border-radius:2px;padding:12px 16px;max-width:66ch;margin:0 0 16px}
.awards{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.award{display:inline-block;background:var(--panel);color:var(--ink);border-radius:2px;padding:3px 12px;font:600 14px/1.4 var(--body)}
.advice{max-width:68ch}.advice h3{font-size:19px;margin:22px 0 6px}.advice h3:first-child{margin-top:0}.advice p{margin:0}
.cwrite p{max-width:68ch}
#glance{min-width:0}


/* ================= Espresso Rated gauge layer ================= */
body{font-family:var(--body)}
/* Bodoni Moda is for the big, sparing lines: page titles, section heads, the ledes and the score numbers.
   Small headings (cards, chapters, tags) stay in Public Sans so the display face is not overused. */
h1,h2{font-family:var(--display)!important;font-weight:500;font-optical-sizing:auto;letter-spacing:-.01em}
h1{font-weight:500;font-size:clamp(36px,4.8vw,58px);line-height:1.06;letter-spacing:-.015em}
h3,.tag,.tt,.nw,.lt,.pt,.ft b,.ch3 h3,.vb h3,.how3 b,.ct,.gpn,.gct,.np-n,.bn,.ns-q,.inshort h2{font-family:var(--body)!important;font-weight:700;letter-spacing:-.005em}
.pq blockquote{font-family:var(--display)!important;font-style:normal;font-weight:500;letter-spacing:0}
.lede{font-family:var(--display);font-weight:400;font-style:normal;letter-spacing:-.005em}
.home-hero .lede,.typehead .lede,.method~.lede,main>.lede{font-family:var(--body);font-weight:400;font-size:clamp(19px,2vw,22px)}
/* wordmark: a small gauge mark and the name in Bodoni Moda */
.logo{display:inline-flex;align-items:center;gap:10px;font:500 26px/1 var(--display);letter-spacing:-.01em;color:var(--ink);line-height:1}
.logo .lmark{flex:none;display:block}
.logo span{white-space:nowrap}
/* masthead: clean, one steel hairline */
.mast{border-top:0;border-bottom:1px solid var(--rule);padding-top:14px}
.foot{border-top:1px solid var(--rule);background:var(--panel)}
.nav a{font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.nav a[aria-current=page]{border-bottom-color:var(--ink)}
/* panels: brushed-steel, no outlines, square */
.meters,.bs>div,.pq,.care{border:0;background:var(--panel)}
.pq{border-left:0;padding:22px 24px}
.meters{padding:12px 18px}
.mb{height:8px}
.mb::after{background:var(--ink)}
.meters li.few .mb::after{box-shadow:inset 0 0 0 2px var(--ink)}
/* kickers and section heads carry no colour: red is the score only */
.need .nt,.chs{background:none;color:var(--muted);border:0;padding:0;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin-left:16px}
.chs{margin-left:0}.chs small{color:var(--muted)}
main h2{position:relative;padding-top:0}
main h2::before{content:none}
.btn{border:2px solid var(--ink);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px;background:var(--ink);color:var(--ground)}
.btn:hover{background:var(--panel);color:var(--ink);filter:none}
.btn.ghost:hover{background:var(--ink);color:var(--ground)}
a{text-decoration-thickness:1px}
.hh-art img{mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;border:0;border-radius:2px}
.gstage,.ghero img,.gimg img,.gcard img,.gpick img,.np-img,.cmpl img,.pc-imgs img{background:#fff}
@media (prefers-color-scheme:dark){.hh-art img{mix-blend-mode:normal}}

/* ---- the score dial (model page rail) ---- */
.scorebox{background:var(--panel);color:var(--ink);padding:22px 22px 20px;border-radius:2px;box-shadow:none;margin:0 0 6px;text-align:center}
.dial{display:block;width:100%;max-width:260px;height:auto;margin:0 auto -4px;overflow:visible}
.dial .dt,.dial .df{fill:none;stroke-width:12;stroke-linecap:butt}
.dial .dt{stroke:var(--track)}
.dial .df{stroke:var(--gauge)}
.dial .dk line{stroke:var(--muted);stroke-width:1.5}
.dial .dn{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.dial .dh{fill:var(--ink)}
.scorebox .sn{display:flex;justify-content:center;align-items:baseline;gap:4px;margin-top:6px}
.scorebox .n{font:500 76px/1 var(--display);letter-spacing:-.02em;color:var(--gauge)}
.scorebox .of{font:600 16px var(--body);color:var(--muted);opacity:1}
.scorebox .tag{font-size:19px;margin:10px 0 0;color:var(--ink);line-height:1.2}
/* ---- shot-timer readout: the model's own cited specs, in a dark gauge-window strip ---- */
.readout{display:flex;gap:1px;margin:16px 0 0;padding:0;background:var(--ink);border-radius:2px;overflow:hidden;text-align:left}
.readout div{flex:1 1 0;min-width:0;padding:10px 12px;background:var(--ink)}
.readout dt{font:600 11px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ground);opacity:.7}
.readout dd{margin:4px 0 0;font:600 17px/1.2 var(--body);color:var(--ground);font-variant-numeric:tabular-nums}
@media (prefers-color-scheme:dark){.readout,.readout div{background:#000}.readout dt,.readout dd{color:#EDEAE7}}

/* ---- score chips in lists: steel chip, gauge-red number, a short gauge tick ---- */
.mcs,.feat .ft .score,.boscore .total,.limg .ls,.np-s,.gps b{background:var(--panel);color:var(--gauge-text);border-radius:2px}
.mcs{display:inline-flex;align-items:baseline;gap:3px;padding:12px 18px 14px;position:relative}
.mcs .score{font:500 48px/1 var(--display);color:var(--gauge)!important;letter-spacing:-.02em}
.mcs .of,.feat .ft .score .of,.boscore .total .of,.limg .ls .of{font:600 14px var(--body);color:var(--muted)}
.feat .ft .score{align-self:center;padding:10px 16px 12px;font:500 48px/1 var(--display);color:var(--gauge)!important}
.boscore .total{display:inline-flex;align-items:baseline;padding:10px 16px 12px;margin-bottom:10px}
.boscore .total .score{font:500 44px/1 var(--display);color:var(--gauge)!important;letter-spacing:-.02em}
.limg .ls{position:absolute;top:10px;right:10px;margin:0;padding:4px 10px;font-weight:700;font-size:14px;background:var(--ground)}
.limg .ls .n{font:500 24px var(--display);color:var(--gauge)}
.np-s{justify-self:start;padding:1px 9px;font-weight:600;color:var(--gauge-text)}.np-s .n{color:inherit;font-size:15px}
.gps b{padding:1px 9px;margin-right:2px;font-size:18px;color:var(--gauge-text)}
.mcs .score,.feat .ft .score,.boscore .total .score{font-variant-numeric:lining-nums tabular-nums}
@media(max-width:799px){.mcs{padding:8px 12px 10px}.mcs .score{font-size:32px}.feat .ft .score{font-size:36px;padding:8px 12px 10px}}
.chip{border-width:1px}
.ctabs>label{border-radius:2px}.ctabs,.pcard{--ctr:2px}
.scorebox .n{font-variant-numeric:lining-nums tabular-nums}
@media(max-width:699px){.logo{font-size:23px}.logo .lmark{width:26px;height:21px}}
.ns .n,.hh-feat .ft .score{color:var(--gauge-text)}
.home-hero h1{font-size:clamp(34px,4.2vw,52px);line-height:1.1;margin-bottom:6px}
.readout div{flex:1 1 auto}.readout dd{white-space:nowrap;font-size:15px}
h1{font-size:clamp(34px,4.2vw,52px)}

/* header nav button type follows the nav links (shared header.css): small, tracked caps, per DESIGN.md labels */
:root{--nav-fs:14px;--nav-fw:600;--nav-ls:.08em;--nav-tt:uppercase}
.nav a[aria-current=page],.nav .nbtn[aria-expanded=true]{border-bottom-color:var(--ink)}

/* Footer panel: padded on its own grid, inside the same container as the header */
.foot{padding:32px;margin-top:72px;align-items:start}
.foot p{margin-top:12px}
@media(max-width:799px){.foot{padding:24px 20px}}
/* Full ranking page: one sortable table, model column sticky on phones */
.seeall{margin:28px 0 0}
.rtwrap{position:relative;overflow-x:auto;border:1px solid var(--rule);border-radius:2px;background:var(--ground);-webkit-overflow-scrolling:touch}
.rtab{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;font-variant-numeric:tabular-nums}
.rtnote{font-size:15px;color:var(--muted);margin:0 0 10px}
.rtab th,.rtab td{padding:8px 8px;border-top:1px solid var(--rule);text-align:right;white-space:nowrap;vertical-align:middle}
.rtab thead th{background:var(--panel);font-weight:600;font-size:13px;line-height:1.25;padding:0;position:sticky;top:0;vertical-align:bottom}
.rtab thead th button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;padding:10px 8px;min-height:44px;font:inherit;text-align:right;color:var(--ink)}
.rtab thead th.mdl button{justify-content:flex-start}
.rtab thead th button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.rtab thead th button::after{content:"";width:0;height:0;border:4px solid transparent;opacity:.25;border-top-color:currentColor;margin-top:4px}
.rtab thead th[aria-sort=ascending] button::after{border-top-color:transparent;border-bottom-color:currentColor;margin-top:-4px;opacity:1}
.rtab thead th[aria-sort=descending] button::after{opacity:1}
.rtab thead th:not(.mdl):not(.rk){max-width:96px}.rtab thead th.rk,.rtab td.rk{text-align:center;width:56px}
.rtab thead th.rk button{justify-content:center}
.rtab th.mdl,.rtab td.mdl{text-align:left}
.rtab tbody th.mdl{font-weight:600;background:var(--ground);min-width:220px;white-space:normal}
.rtab .mdl{position:sticky;left:0;z-index:1}
.rtab thead th.mdl{z-index:2}
.rtab tbody tr:hover td,.rtab tbody tr:hover th{background:var(--panel)}
.rtab .mdl a{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.rtab .mdl a:hover span{text-decoration:underline}
.rtab .mdl img{width:60px;height:40px;object-fit:contain;background:#fff;border:1px solid var(--rule);border-radius:2px;flex:none}
.rtab td.ov{text-align:center}
.rtab .rs{font-family:var(--display);font-size:26px;color:var(--gauge);font-weight:500}
.rtab td.lo{color:var(--muted)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.notrk{font-size:16px;color:var(--muted);margin:16px 0 0}
@media(max-width:640px){.rtab tbody th.mdl{min-width:160px;box-shadow:1px 0 0 var(--rule)}.rtab .mdl img{width:44px;height:30px}.rtab th,.rtab td{padding:8px 10px}}
.rtab thead th{white-space:normal}.rtab thead th button{white-space:normal;word-break:normal}.rtab thead th:not(.mdl):not(.rk){min-width:84px}

/* Shared header navigation (engine/render/header.css, appended to every site's site.css at render).
   Structure only: each site keeps its own nav-link look (.nav a in its site.css) and sets the
   button type with --nav-fs / --nav-fw / --nav-ls / --nav-tt. Rules: docs/playbook.md, "Site structure".
   Desktop: logo left, nav and search button right, one hairline under the whole bar.
   Up to 3 categories are links; 4 or more are one "Categories" menu button (.nmenu).
   Phones (under 760px) with JS: one menu button; the bar is logo, search, menu. */
header.mast{display:flex;align-items:center;flex-wrap:nowrap;gap:0 20px;padding:12px 0;position:relative;border-bottom:1px solid var(--rule);border-top:0}
header.mast .logo{flex:none}
header.mast .nav{display:flex;align-items:center;flex-wrap:nowrap;gap:0 24px;margin:0 0 0 auto;padding:0;overflow:visible;width:auto;min-width:0;-webkit-mask-image:none;mask-image:none}
header.mast .nav a,.nbtn{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0;white-space:nowrap}
.nbtn{font-family:inherit;font-size:var(--nav-fs,16px);font-weight:var(--nav-fw,600);letter-spacing:var(--nav-ls,0);text-transform:var(--nav-tt,none);color:var(--ink);background:none;border:0;border-bottom:2px solid transparent;border-radius:0;cursor:pointer}
.nbtn:hover,.nbtn[aria-expanded=true]{color:var(--blue)}
.nbtn svg{flex:none;transition:transform .15s}.nbtn[aria-expanded=true] svg{transform:rotate(180deg)}
.nmenu{position:relative}
.nlist{display:none;position:absolute;top:calc(100% + 8px);left:-16px;z-index:40;min-width:240px;margin:0;padding:8px 0;list-style:none;background:var(--ground);border:1px solid var(--rule);box-shadow:none}
.nmenu.open .nlist{display:block}
.nlist a{display:flex!important;width:100%;box-sizing:border-box;padding:0 16px!important;border-bottom:0!important;text-transform:none!important;letter-spacing:0!important;font-size:16px!important;font-weight:500!important}
.nlist a:hover,.nlist a:focus-visible{background:var(--panel)}
.nlist .nall{border-top:1px solid var(--rule);margin-top:4px;padding-top:4px}
.nlist .nall a{font-weight:700!important}
/* "Categories" as a plain link: no JS, and inside the phone menu. With JS on desktop the button replaces it. */
.ncat{display:inline-flex}
.js .ncat{display:none!important}
html:not(.js) .nmenu{display:none}
/* the two icon buttons: no box, the icon sits flush with the container edge */
.sbtn,.mbtn{align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0!important;border-radius:2px!important;background:transparent;color:var(--ink);cursor:pointer}
.sbtn:hover,.sbtn[aria-expanded=true],.mbtn:hover,.mbtn[aria-expanded=true]{background:var(--panel)!important;color:var(--ink)!important}
.sbtn svg,.mbtn svg{display:block}
.mbtn{display:none}
header.mast .msearch{margin-right:-11px}
@media(min-width:760px){.js .nmenu .nlist{display:none}.js .nmenu.open .nlist{display:block}}
@media(max-width:759px){
  header.mast{gap:0 4px;padding:8px 0}
  header.mast .msearch{margin-left:auto;margin-right:0;position:static}
  .js .mbtn{display:inline-flex;margin-right:-11px}
  .js header.mast .nav{display:none;position:absolute;left:-16px;right:-16px;top:100%;z-index:35;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 16px 14px;background:var(--ground);border-bottom:1px solid var(--rule)}
  .js header.mast.mopen .nav{display:flex}
  header.mast .nav a{width:100%;border-bottom:1px solid var(--rule)}
  /* phones: the category list is flat under a "Categories" link, no popover button */
  .nbtn{display:none!important}
  .js .ncat{display:inline-flex!important}
  html:not(.js) .nmenu,.nmenu{display:block}
  .nlist{display:block;position:static;min-width:0;padding:0 0 0 16px;border:0}
  .nlist .nall{display:none}
  .nlist li{border-bottom:1px solid var(--rule)}
  .nlist a{padding:0!important;font-size:inherit!important;font-weight:inherit!important;border-bottom:0!important;text-transform:inherit!important;letter-spacing:inherit!important}
  html:not(.js) header.mast{flex-wrap:wrap}
  html:not(.js) header.mast .nav{order:3;flex:1 1 100%;margin:0;flex-wrap:wrap;gap:0 18px}
  html:not(.js) header.mast .nav a{width:auto;border-bottom:0}
  html:not(.js) header.mast .nmenu{display:none}
}
/* footer: the panel is padded on its own grid, aligned to the same container as the header */
footer.foot{box-sizing:border-box;margin-bottom:40px}

/* ---- Browse-by-type tiles (all sites) ----
   The picture sits inside the steel card (no white box, no overflow), the title
   block is two lines tall in every card so titles and counts align, equal padding all round. */
.types{align-items:stretch;gap:16px}
.types .type{display:flex;flex-direction:column;background:var(--panel);padding:0;overflow:hidden}
.types .type .timg.ico{position:static;display:block;aspect-ratio:16/9;margin:0;padding:18px 18px 0;background:transparent;border-radius:0;overflow:hidden;box-sizing:border-box}
.types .type .timg.ico img{position:static;display:block;width:100%;height:100%;padding:0;transform:none;object-fit:contain;mix-blend-mode:multiply}
.types .type .tt{padding:14px 18px 0;font-size:28px;line-height:1.1}
.types .type .tc{margin-top:auto;padding:6px 18px 18px}

/* ---- phone overflow fixes (found by the visual check on live data) ---- */
.cpanels,.cpanel,.cpick{min-width:0;max-width:100%}
.cpick select{min-width:0;max-width:100%}
.rlist li>*{min-width:0}
.rlist .rh,.rlist .rh a,.rstats .rs{overflow-wrap:anywhere}