/* ---------------------------------------------------------------- tokens */
:root{
  --accent:#0f766e;
  --accent2:#84cc16;
  --ink:#12151c;
  --muted:#5d6472;
  --line:#e4e6ec;
  --bg:#ffffff;
  --soft:#f6f7f9;
  --radius:4px;
  --measure:800px;
  --wrap:1180px;
  --font-head:'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --mark-radius:30%;
  --cta:#f36b1c;
  --cta2:#d2490b;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Nothing may widen the page sideways. A phone that can be dragged left to reveal a strip of
   blank paper is the single most common way a light layout still feels broken, and the usual
   cause is one element that refuses to shrink - or a third party's. `clip` rather than `hidden`
   because `hidden` turns the document into a scroll container and kills position:sticky. */
html,body{overflow-x:hidden;max-width:100%}
@supports(overflow:clip){html,body{overflow-x:clip}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:1.09rem;line-height:1.72;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums lining-nums}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;margin:0 0 .45em;letter-spacing:-.011em}
h1{font-size:clamp(1.85rem,4.2vw,2.6rem)}
h2{font-size:clamp(1.35rem,2.6vw,1.72rem)}
h3{font-size:1.14rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:calc(var(--measure) + 40px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
main{display:block;min-height:50vh}

/* ---------------------------------------------------------------- header */
.top{border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:30}
.top .bar{display:flex;align-items:center;gap:14px;min-height:68px;position:relative;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:0 1 auto;
  min-width:0;max-width:340px}
.brand .mark{width:38px;height:38px;flex:none;display:grid;place-items:center;color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1rem;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:var(--mark-radius);}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text b{font-family:var(--font-head);font-size:1.12rem;font-weight:800;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(300px,100%)}
.brand-text i{font-style:normal;font-size:.72rem;color:var(--muted);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(300px,100%)}
.nav{margin-left:auto;min-width:0}
.nav ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 11px;text-decoration:none;font-size:.9rem;font-weight:600;
  border-radius:calc(var(--radius) + 2px);color:var(--ink)}
.nav a:hover{background:var(--soft);color:var(--accent)}
.nav .extra a{color:var(--muted);font-weight:500}
.navcheck{position:absolute;opacity:0}
.burger{display:none;margin-left:auto;width:42px;height:38px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);position:relative;background:var(--bg)}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:18px;
  height:2px;background:var(--ink);content:"";transition:.18s}
.burger span{top:18px}
.burger span::before{top:-6px;left:0}
.burger span::after{top:6px;left:0}
@media(max-width:880px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-top:1px solid var(--line);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.45);display:none;margin:0;padding:8px 12px 14px}
  .navcheck:checked ~ .nav{display:block}
  .navcheck:checked ~ .burger span{background:transparent}
  .navcheck:checked ~ .burger span::before{top:0;transform:rotate(45deg)}
  .navcheck:checked ~ .burger span::after{top:0;transform:rotate(-45deg)}
  .nav ul{flex-direction:column;gap:0}
  .nav a{padding:11px 8px;border-bottom:1px solid var(--line);border-radius:0;font-size:1rem}
  .nav li:last-child a{border-bottom:0}
}

/* ---------------------------------------------------------------- pieces */
.chip{display:inline-block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:800;color:var(--accent);margin-bottom:8px}
.chip a{text-decoration:none}
.kicker{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--accent);margin-bottom:8px}
.kicker a{text-decoration:none}
.mins{font-size:.76rem;color:var(--muted)}
.rule{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:38px 0 18px;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.11em}
/* This used to be `white-space:nowrap`, which is why a long section name ran off the side of
   a phone and dragged its "See all" link with it. The name is allowed to wrap now; `min-width:0`
   lets it shrink at all, which a flex item will not do by default. */
.rule span:first-child{min-width:0;overflow-wrap:break-word}
.rule span a{text-decoration:none}
.rule::after{content:"";flex:1 1 18px;min-width:16px;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent)}
.rule .all{font-size:.76rem;letter-spacing:.02em;text-transform:none;color:var(--muted);
  white-space:nowrap;flex:0 0 auto}
.btn{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  padding:11px 20px;border-radius:var(--radius);text-decoration:none;font-weight:700;font-size:.92rem}
.btn:hover{filter:brightness(1.07)}
.crumbs{margin:18px 0 6px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:.78rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.tight{list-style:none;margin:0;padding:0}
.tight li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.tight li a{text-decoration:none;font-weight:600}
.tight li a:hover{color:var(--accent)}
.tight li span{color:var(--muted);font-size:.78rem;white-space:nowrap}

/* ---------------------------------------------------------------- cards */
.cards{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin-bottom:12px}
.card h3{margin-bottom:.35em;font-size:1.08rem}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--accent)}
.card p{font-size:.9rem;color:var(--muted);margin-bottom:.5em}
.sec-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.sec{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;background:var(--bg);transition:.16s}
.sec:hover{border-color:var(--accent);transform:translateY(-2px)}
.sec b{display:block;font-family:var(--font-head);font-size:1.02rem}
.sec span{font-size:.74rem;color:var(--muted)}
.sec p{font-size:.84rem;color:var(--muted);margin:.5em 0 0}

/* ---------------------------------------------------------------- article */
.post{padding-bottom:30px}
.post-head{margin:14px 0 18px}
.dek{font-size:1.12rem;color:var(--muted);margin-bottom:.8em}
/* The standfirst under an article headline is the one paragraph that decides whether the page
   gets read, and as muted grey body text it read as furniture. Scoped to .post because three of
   the four article layouts put it outside <header>, straight inside <article class="post">. */
.post .dek{position:relative;margin:16px 0 18px;padding:14px 18px;color:var(--ink);
  font-size:1.05rem;line-height:1.6;font-weight:500;
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 9%,var(--bg)),
    color-mix(in srgb,var(--accent2) 5%,var(--bg)))}
.post .dek::before{content:"In short";display:block;font-family:var(--font-head);
  font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;
  color:var(--accent);margin-bottom:6px}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.8rem;color:var(--muted);
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta a{text-decoration:none;font-weight:700;color:var(--accent)}
.meta .by a{color:var(--ink)}
.hero-img{margin:22px 0}
.hero-img img,.mid-img img{width:100%;border-radius:var(--radius)}
.hero-img figcaption,.mid-img figcaption{font-size:.75rem;color:var(--muted);margin-top:7px}
.mid-img{margin:24px 0}
.lede{font-size:1.18rem;line-height:1.6;font-weight:500;margin:20px 0 6px;
  padding-left:18px;border-left:4px solid var(--accent)}
.body{max-width:var(--measure)}
.body h2{margin:1.7em 0 .5em;scroll-margin-top:80px}
.body h3{margin:1.5em 0 .45em;scroll-margin-top:80px}
.body ul,.body ol{margin:0 0 1.1em;padding-left:1.3em}
.body li{margin-bottom:.45em}
.body ol.steps{counter-reset:st;list-style:none;padding-left:0}
.body ol.steps li{position:relative;padding-left:40px;margin-bottom:.8em}
.body ol.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;
  font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);
  font-weight:600;transition:color .15s,text-decoration-color .15s}
.body a:hover,.body a:focus-visible{text-decoration-thickness:2px;
  text-decoration-color:var(--accent);color:var(--accent2)}
/* The writer marks the number that decides the answer. It has to survive to the page. */
.body strong,.takeaways strong,.callout strong,td strong{font-weight:700;color:var(--ink);
  background:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent2) 42%,transparent) 0);
  padding:0 .06em}
.body em{font-style:italic}
.body code,td code,li code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--soft);border:1px solid var(--line);border-radius:4px;
  padding:.08em .35em;white-space:nowrap}
.body>ul>li::marker,.body>ol>li::marker{color:var(--accent);font-weight:700}
.body p+h2,.body ul+h2,.body ol+h2,.table-wrap+h2{margin-top:2em}

/* A picture beside the prose instead of across it. Bing serves these at roughly this size, so
   at 360px it is shown at its own resolution; the full-width version of the same thumbnail is
   being stretched, which is what made the wide ones look faded. */
.side-img{float:right;width:min(360px,42%);margin:6px 0 18px 26px;clear:right}
.side-img img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
.side-img figcaption{font-size:.74rem;color:var(--muted);margin-top:6px;line-height:1.4}
@media(max-width:700px){.side-img{float:none;width:100%;margin:18px 0}}
.takeaways{background:var(--soft);border-radius:var(--radius);padding:18px 22px;margin:26px 0}
.takeaways h2{margin:0 0 .5em;font-size:1.06rem;text-transform:uppercase;letter-spacing:.08em}
.takeaways ul{margin:0;padding-left:1.1em}
.takeaways li{margin-bottom:.4em}
.table-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--line);
  border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.table-wrap table{border:0}
table{border-collapse:collapse;width:100%;font-size:.93rem}
.table-wrap th,.table-wrap td{border-left:0;border-right:0}
.table-wrap tr:last-child td{border-bottom:0}
caption{caption-side:top;text-align:left;font-size:.8rem;color:var(--muted);padding-bottom:8px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--soft);font-family:var(--font-head);font-size:.86rem}
tbody tr:nth-child(even){background:rgba(0,0,0,.015)}
.callout{margin:22px 0;padding:14px 18px;border-left:4px solid var(--accent);background:var(--soft);
  border-radius:0 var(--radius) var(--radius) 0}
.callout b{display:block;font-family:var(--font-head);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.09em;margin-bottom:4px;color:var(--accent)}
.callout p{margin:0;font-size:.95rem}
.callout p{margin:0;font-size:.96rem}
.callout+.callout{margin-top:-6px}
.callout-warning{border-left-color:#c1272d;background:#fdf3f3}
.callout-warning b{color:#c1272d}
.callout-check{border-left-color:#0f8a4a;background:#f2faf5}
.callout-check b{color:#0f8a4a}
.callout-rule{border-left-color:var(--ink);background:var(--soft)}
.callout-rule b{color:var(--ink)}
.callout-cost{border-left-color:#b45309;background:#fdf8ef}
.callout-cost b{color:#b45309}
.callout-mistake{border-left-color:#7c3aed;background:#f8f5ff}
.callout-mistake b{color:#7c3aed}
.verdict{margin:26px 0;padding:18px 22px;border:2px solid var(--accent);border-radius:var(--radius)}
.verdict b{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.09em;
  font-size:.78rem;color:var(--accent);margin-bottom:6px}
.verdict p{margin:0}
.faq{margin-top:8px}
.faq-item{border-top:1px solid var(--line);padding:16px 0}
.faq-item h3{margin-bottom:.35em;font-size:1.03rem}
.faq-item p{margin:0;color:var(--muted)}
.author-note{font-style:italic;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;
  margin-top:26px}
.post-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;
  color:var(--muted)}
.post-foot a{color:var(--accent)}

/* ---------------------------------------------------------------- pager */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:34px 0 8px;
  padding-top:18px;border-top:1px solid var(--line)}
.pg{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;text-decoration:none;
  font-weight:700;font-size:.92rem;border:1px solid var(--line);border-radius:999px;
  color:var(--ink);transition:.15s}
.pg:hover{border-color:var(--accent);color:var(--accent);background:var(--soft)}
.pg.off{border:0;min-width:1px;padding:0}
.pg-count{font-size:.78rem;color:var(--muted);letter-spacing:.04em}

/* --------------------------------------------- centred header, folded menu */
.top.centre .bar{justify-content:center;min-height:74px;flex-wrap:nowrap}
.top.centre .brand .mark{flex:none}
/* 70vw was wider than the gap between the burger and the home icon, so on a phone the site
   name sat on top of both. Measure against the bar, not the window, and leave room for each. */
.top.centre .brand{position:absolute;left:50%;transform:translateX(-50%);
  max-width:calc(100% - 118px)}
.top.centre .brand-text{align-items:center;text-align:center}
.top.centre .burger{display:block;margin:0;margin-right:auto}
.top.centre .head-home{margin-left:auto;font-size:1.1rem;text-decoration:none;color:var(--muted);
  width:42px;height:38px;display:grid;place-items:center;border:1px solid transparent}
.top.centre .head-home:hover{color:var(--accent)}
.top.centre .nav.drop{position:absolute;top:100%;left:0;right:0;background:var(--bg);
  border-top:1px solid var(--line);box-shadow:0 22px 44px -26px rgba(0,0,0,.5);
  display:none;margin:0;padding:10px 0 16px;z-index:40}
.top.centre .navcheck:checked ~ .nav.drop{display:block}
.top.centre .navcheck:checked ~ .bar .burger span{background:transparent}
.top.centre .navcheck:checked ~ .bar .burger span::before{top:0;transform:rotate(45deg)}
.top.centre .navcheck:checked ~ .bar .burger span::after{top:0;transform:rotate(-45deg)}
.top.centre .nav.drop ul{flex-direction:column;gap:0}
.top.centre .nav.drop a{padding:12px 4px;border-bottom:1px solid var(--line);border-radius:0;
  font-size:1rem}
.top.centre .nav.drop li:last-child a{border-bottom:0}
@media(min-width:881px){
  .top.centre .nav.drop ul{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:2px}
  .top.centre .nav.drop a{border-bottom:0;padding:10px 14px;border-radius:999px}
  .top.centre .nav.drop a:hover{background:var(--soft);color:var(--accent)}
}

/* An ad network may inject a fixed, full-width iframe as a direct child of <html>, outside
   anything this stylesheet owns. It cannot be prevented from appearing, but it can be stopped
   from making the page wider than the screen. */
html>iframe{max-width:100vw}
.ad-slot{max-width:100%;overflow:hidden}
.ad-slot iframe,.ad-sticky iframe,.ad-slot img{max-width:100%}

/* --------------------------------------------------------- direct-link ad */
.ad-direct{display:inline-block;font-size:.8rem;font-weight:600;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.ad-direct:hover{color:var(--accent)}

/* ------------------------------------------------------- buying furniture */
/* The disclosure sits above the first link on the page, not in the footer, because that is
   where it is actually read and where the agreement intends it to be. */
.affil-note{font-size:.78rem;color:var(--muted);background:var(--soft);border-radius:var(--radius);
  padding:9px 13px;margin:0 0 18px;line-height:1.5}

/* The fit check is the page. A reader arrives with a number; this says which thing meets it. */
.fitcheck{margin:22px 0 28px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--bg)}
.fitcheck-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 16px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 12%,var(--bg)),
    color-mix(in srgb,var(--accent2) 7%,var(--bg)));border-bottom:1px solid var(--line)}
.fitcheck-head b{font-family:var(--font-head);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent)}
.fitcheck-head span{font-size:.88rem;color:var(--ink);font-weight:600}
.fitcheck .table-wrap{margin:0;border:0;border-radius:0}
.fitcheck table{font-size:.89rem}
.fitcheck td{vertical-align:middle}
.fitcheck .fit-v{font-weight:700}
.fitcheck tr.fit-yes .fit-v{color:var(--ok,#1a7f45)}
.fitcheck tr.fit-no{opacity:.72}
/* Not judged and not failed. A row nobody could measure is drawn as an open question rather
   than a rejection, because reading it as a rejection is what made every page recommend
   nothing. */
.fitcheck tr.fit-unknown .fit-v{color:var(--muted);font-style:italic;font-weight:600}
.fitcheck tr.fit-no .fit-v{color:var(--muted)}
/* On a phone four columns in 335px made this over a thousand pixels tall with a sideways
   scrollbar. One card per product instead: same rows, same markup, a third of the height. */
@media(max-width:619px){
  .fitcheck .table-wrap{overflow:visible}
  /* no width:100% here - these are block elements, they already fill the parent, and
     100% plus a 12px margin is 12px of sideways scroll */
  .fitcheck table,.fitcheck tbody,.fitcheck tr,.fitcheck td{display:block;width:auto}
  /* out of layout, still in the document: left:-9999px moves a box, it does not unmeasure it */
  .fitcheck thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .fitcheck tr{border:1px solid var(--line);border-radius:var(--radius);margin:10px 12px;
    padding:11px 13px;background:var(--bg)}
  .fitcheck tr.fit-yes{border-left:3px solid var(--accent)}
  .fitcheck td{border:0;padding:2px 0;font-size:.86rem;line-height:1.45}
  .fitcheck td:first-child{font-size:.95rem}
  .fitcheck td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;
    font-size:.64rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);
    font-weight:700;margin-bottom:1px}
  .fitcheck td:last-child{padding-top:9px}
  .fitcheck .pbuy.sm{width:100%;justify-content:center;padding:10px}
}

/* One product, one row: picture, the reason it fixes the problem, the button. The box is as
   tall as its words and no taller - the old stacked box was mostly empty space beside a tall
   picture column. On a phone the button drops under the words, still full width of them. */
.pbox{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px 16px;align-items:center;
  margin:22px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.pbox-pick{border-color:color-mix(in srgb,var(--cta) 45%,var(--line));
  box-shadow:0 12px 30px -24px color-mix(in srgb,var(--cta) 85%,transparent)}
.pbox-media{display:grid;place-items:center;width:84px;height:84px;background:#fff;
  border-radius:calc(var(--radius) * .6);padding:4px;align-self:start;text-decoration:none}
.pbox-media img{max-width:100%;max-height:76px;width:auto;height:auto;object-fit:contain}
.pbox-body{min-width:0}
.pbox-buy{grid-column:1 / -1}
.pbox-buy a.pbuy{width:100%}
@media(min-width:720px){
  .pbox{grid-template-columns:100px minmax(0,1fr) auto;gap:0 20px;padding:14px 18px}
  .pbox-media{width:100px;height:100px;align-self:center}
  .pbox-media img{max-height:92px}
  .pbox-buy{grid-column:auto}
  .pbox-buy a.pbuy{width:auto}
}
.pbox-role{display:inline-block;font-family:var(--font-body);font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;padding:3px 9px;border-radius:6px;margin-bottom:6px;
  background:color-mix(in srgb,var(--cta) 12%,var(--bg));
  color:color-mix(in srgb,var(--cta2) 80%,#000);
  border:1px solid color-mix(in srgb,var(--cta) 32%,var(--line))}
.pbox-companion .pbox-role,.pbox-needed .pbox-role,.pbox-mentioned .pbox-role{
  background:var(--soft);color:var(--ink);border-color:var(--line)}
.pbox-unknown .pbox-role{background:var(--soft);color:var(--muted);border-color:var(--line)}
.pbox-name,.body .pbox-name{font-size:1.03rem;margin:0 0 4px;line-height:1.32}
.body .pbox-name a,.pbox-name a{text-decoration:none;color:var(--ink)}
.body .pbox-name a:hover,.pbox-name a:hover{color:var(--accent)}
.pbox-why,.body .pbox-why{font-size:.93rem;line-height:1.5;margin:0;color:var(--ink)}
.body ul.pbox-specs,.pbox-specs{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;
  gap:5px 6px;font-size:.74rem;line-height:1.4}
.body ul.pbox-specs li,.pbox-specs li{margin:0;padding:2px 8px;border-radius:999px;background:var(--soft);
  border:1px solid var(--line);color:var(--muted)}
.pbox-specs li::marker{content:""}
/* On a phone the box is the picture, the name, one line of why, and the button. */
@media(max-width:719px){
  .pbox .pbox-specs,.body .pbox ul.pbox-specs{display:none}
  .pbox-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pbox-why{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem}
}
.pbox-specs b{color:var(--ink);font-weight:700;margin-right:3px}

/* The buy button. Its own colour on every theme - a warm orange reads as "act" beside any
   accent - with white bold text, and weight enough that the article's link style can never
   reach it. The link colour and underline of `.body a` used to win on specificity, which is
   what turned the words into green-on-green and made them unreadable. */
a.pbuy,.body a.pbuy{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:800;font-size:.95rem;line-height:1.2;
  padding:12px 22px;border-radius:10px;white-space:nowrap;
  color:#fff !important;text-decoration:none !important;
  background:linear-gradient(180deg,var(--cta,#f36b1c) 0%,var(--cta2,#d2490b) 100%);
  border:1px solid color-mix(in srgb,var(--cta2,#d2490b) 82%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
    0 8px 18px -10px color-mix(in srgb,var(--cta2,#d2490b) 90%,transparent);
  text-shadow:0 1px 1px rgba(0,0,0,.2);transition:transform .12s,box-shadow .12s,filter .12s}
a.pbuy::after{content:"→";font-weight:800}
a.pbuy:hover,.body a.pbuy:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
    0 12px 24px -10px color-mix(in srgb,var(--cta2,#d2490b) 95%,transparent)}
a.pbuy:visited,a.pbuy:active{color:#fff !important}
a.pbuy:focus-visible{outline:3px solid color-mix(in srgb,var(--cta,#f36b1c) 45%,transparent);
  outline-offset:2px}
a.pbuy.sm,.body a.pbuy.sm{padding:8px 14px;font-size:.8rem;border-radius:8px}
/* A single product inside an information article: the reader was not shopping, so this is a
   line and a link rather than a sales box. */
.body>.pbox:only-of-type{margin:24px 0}

/* The recap of what helps, on an information page: one line each, a small button. */
.kit{margin:28px 0;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:color-mix(in srgb,var(--cta,#f36b1c) 5%,var(--bg))}
.kit>b{display:block;font-family:var(--font-head);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
.kit ul,.body .kit ul{list-style:none;margin:0;padding:0}
.kit li,.body .kit li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;
  padding:9px 0;border-top:1px solid var(--line)}
.kit li:first-child{border-top:0}
.body .kit a.kit-name,.kit a.kit-name{font-weight:700;color:var(--ink);text-decoration:none;flex:1 1 220px}
.kit li span{flex:1 1 100%;order:3;font-size:.84rem;color:var(--muted);line-height:1.45}
.kit a.pbuy{margin-left:auto}

/* Where this article sits: the guide above it, and - on a hub - everything it looks after. */
.partof{font-size:.85rem;color:var(--muted);margin:0 0 16px;padding:8px 13px;
  border-radius:var(--radius);background:var(--soft);border:1px solid var(--line)}
.body .partof a,.partof a{font-weight:700;color:var(--accent);text-decoration:none}
.hubdir{margin:32px 0;padding:18px 22px;border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);background:var(--soft)}
.hubdir h2{font-size:1.12rem;margin:0 0 10px}
.body .hubdir ul,.hubdir ul{columns:2 250px;column-gap:28px;margin:0;padding-left:18px}
.hubdir li{break-inside:avoid;margin:0 0 7px;font-size:.94rem;line-height:1.45}

/* ---------------------------------------------------------------- toc */
.toc{margin:24px 0 30px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--soft)}
.toc b{display:block;font-family:var(--font-head);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.toc ol{list-style:none;counter-reset:toc;padding-left:0;margin:0}
.toc li{position:relative;padding-left:30px;margin-bottom:6px;font-size:.93rem}
.toc li.lvl2{counter-increment:toc}
.toc li.lvl2::before{content:counter(toc);position:absolute;left:0;top:1px;font-size:.72rem;
  font-weight:800;color:var(--accent)}
.toc li.lvl3{padding-left:48px;font-size:.87rem;color:var(--muted)}
.toc li.lvl3::before{content:"\2013 ";position:absolute;left:30px;color:var(--muted)}
.toc a{text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline}

/* ---------------------------------------------------------------- related */
.related{margin:40px 0 10px;border-top:2px solid var(--ink);padding-top:22px}
.related h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.1em}
.rel-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.rel{text-decoration:none;display:block}
.rel img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);margin-bottom:9px}
.rel-cat{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);font-weight:800;margin-bottom:3px}
.rel b{font-family:var(--font-head);font-size:.95rem;font-weight:600;line-height:1.3}
.rel:hover b{color:var(--accent)}

/* ---------------------------------------------------------------- pages */
.cat-head{margin:20px 0 26px;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.cat-head p{color:var(--muted);max-width:60ch;margin-bottom:.4em}
.cat-head .count{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}
.plainlist .entry{padding:22px 0;border-bottom:1px solid var(--line)}
.plainlist .entry h2{margin-bottom:.3em}
.plainlist .entry h2 a{text-decoration:none}
.plainlist .entry h2 a:hover{color:var(--accent)}
.plainlist .entry p{color:var(--muted);margin-bottom:.4em}
.entry-meta{font-size:.76rem;color:var(--muted)}
.entry-meta a{color:var(--accent);text-decoration:none}
.opening{padding:44px 0 24px;border-bottom:1px solid var(--line);margin-bottom:10px}
.opening p{color:var(--muted);font-size:1.1rem;max-width:62ch}
.author-role{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
  font-weight:800}
.author-list{list-style:none;padding:0}
.author-list li{padding:9px 0;border-bottom:1px solid var(--line)}
.author-list a{text-decoration:none;font-weight:600}

/* ---------------------------------------------------------------- ads */
.ad-slot{margin:26px 0;text-align:center;overflow:hidden}
.ad-slot .ad-label{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#9aa1ad;margin-bottom:5px}
.ad-header,.ad-body_top{margin:0;padding:10px 0;background:var(--soft)}
.ad-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg);
  border-top:1px solid var(--line);padding:6px;text-align:center;
  box-shadow:0 -8px 24px -18px rgba(0,0,0,.5)}
.ad-exit{position:fixed;inset:0;z-index:70;background:rgba(10,12,18,.72);display:grid;place-items:center;padding:20px}
.ad-exit[hidden]{display:none}
.ad-exit-inner{background:var(--bg);border-radius:var(--radius);padding:26px;max-width:640px;
  position:relative}
.ad-exit-close{position:absolute;top:6px;right:10px;border:0;background:none;font-size:1.6rem;
  line-height:1;cursor:pointer;color:var(--muted)}

/* ---------------------------------------------------------------- products */
.products{margin:26px 0}
.product{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}
.product-name{margin-bottom:.35em}
.product-for,.product-con,.product-price{font-size:.92rem;margin-bottom:.45em}
.product-cta{margin:14px 0 0}

/* ------------------------------------------------- figures (up to four) */
/* A reserved box before the bytes arrive: the ratio is set here, so nothing below the picture
   moves when it loads. That is the whole reason a page with four images can still feel calm. */
.fig{margin:26px 0;position:relative}
.fig img{width:100%;aspect-ratio:var(--ar,16/10);object-fit:cover;border-radius:var(--radius);
  background:var(--soft);border:1px solid var(--line)}
.fig figcaption{font-size:.76rem;color:var(--muted);margin-top:8px;line-height:1.45;
  padding-left:11px;border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.fig-right,.fig-left{width:min(340px,44%);margin-top:6px;margin-bottom:16px}
.fig-right{float:right;margin-left:26px;clear:right}
.fig-left{float:left;margin-right:26px;clear:left}
.fig-right img,.fig-left img{aspect-ratio:var(--ar,4/3)}
.fig-wide{--ar:21/9}
/* two floats in a row would interleave the prose into a column an inch wide */
.fig-right+.fig-right,.fig-left+.fig-left{clear:both}
.body h2{clear:both}
@media(max-width:700px){
  .fig-right,.fig-left{float:none;width:100%;margin:22px 0}
  .fig-right img,.fig-left img{aspect-ratio:var(--ar,16/10)}
  .fig-wide{--ar:16/10}
}

/* ------------------------------------------------------------- spec bars */
/* The reader's figure against the product's. Widths come from the builder as percentages, so
   the bar is drawn from measured numbers and never from prose. */
.specbar{margin:22px 0 26px;padding:15px 18px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg)}
.specbar-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:13px}
.specbar-head b{font-family:var(--font-head);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent)}
.specbar-head span{font-size:.8rem;color:var(--muted)}
.specbar-row{margin-bottom:13px}
.specbar-row:last-child{margin-bottom:4px}
.specbar-label{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;
  margin-bottom:5px;line-height:1.35}
.specbar-label span:first-child{font-weight:600;min-width:0;overflow-wrap:break-word}
.specbar-label span:last-child{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
.specbar-track{position:relative;height:10px;border-radius:999px;background:var(--soft);
  border:1px solid var(--line);overflow:hidden}
.specbar-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}
.specbar-row.miss .specbar-fill{background:color-mix(in srgb,var(--muted) 45%,var(--soft))}
/* the requirement, drawn across the track wherever it falls */
.specbar-need{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);
  border-radius:2px}
.specbar-need::after{content:attr(data-need);position:absolute;top:-17px;left:50%;
  transform:translateX(-50%);font-size:.6rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
.specbar-foot{font-size:.76rem;color:var(--muted);margin:10px 0 0;line-height:1.45}
.specbar-row.miss .specbar-label span:last-child{color:var(--muted)}
.specbar-row.hit .specbar-label span:last-child{color:var(--ok,#1a7f45)}

/* ------------------------------------------------------------ pros, cons */
.proscons{display:grid;gap:14px;grid-template-columns:1fr;margin:24px 0}
@media(min-width:660px){.proscons{grid-template-columns:1fr 1fr}}
.proscons>div{border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px 14px}
.proscons .pc-good{border-top:3px solid var(--ok,#1a7f45);
  background:color-mix(in srgb,#1a7f45 4%,var(--bg))}
.proscons .pc-bad{border-top:3px solid var(--bad,#c1272d);
  background:color-mix(in srgb,#c1272d 4%,var(--bg))}
.proscons b{display:block;font-family:var(--font-head);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:9px}
.proscons .pc-good b{color:var(--ok,#1a7f45)}
.proscons .pc-bad b{color:var(--bad,#c1272d)}
.proscons ul{list-style:none;margin:0;padding:0;font-size:.9rem}
.proscons li{position:relative;padding-left:22px;margin-bottom:7px;line-height:1.5}
.proscons li:last-child{margin-bottom:0}
.proscons .pc-good li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:800;
  color:var(--ok,#1a7f45)}
.proscons .pc-bad li::before{content:"\2715";position:absolute;left:0;top:0;font-weight:800;
  color:var(--bad,#c1272d)}

/* ---------------------------------------------------------- quick picks */
/* The shortlist as cards, above the article. Somebody who already trusts the site wants the
   name, not the reasoning, and making them scroll for it loses the click to a competitor. */
.pquick{margin:20px 0 28px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--bg)}
.pquick-head{padding:11px 16px;font-family:var(--font-head);font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.15em;color:var(--accent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 12%,var(--bg)),
    color-mix(in srgb,var(--accent2) 7%,var(--bg)));border-bottom:1px solid var(--line)}
.pquick-grid{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:680px){.pquick-grid{grid-template-columns:repeat(3,1fr)}.pquick-grid.c2{grid-template-columns:repeat(2,1fr)}.pquick-grid.c1{grid-template-columns:1fr}}
.pq{padding:15px 15px 17px;border-top:1px solid var(--line);display:flex;flex-direction:column;
  min-width:0}
@media(min-width:680px){
  .pq{border-top:0;border-left:1px solid var(--line)}
  .pq:first-child{border-left:0}
}
.pq-role{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);margin-bottom:9px}
.pq-media{height:104px;display:grid;place-items:center;margin-bottom:10px;background:#fff;
  border-radius:var(--radius)}
.pq-media img{max-height:104px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.pq-name{font-family:var(--font-head);font-size:.93rem;font-weight:700;line-height:1.32;
  margin:0 0 5px}
.pq-name a{text-decoration:none}
.pq-name a:hover{color:var(--accent)}
.pq-why{font-size:.8rem;color:var(--muted);line-height:1.45;margin:0 0 12px;flex:1 1 auto}
.pq a.pbuy,.body .pq a.pbuy{width:100%;padding:10px 12px;font-size:.86rem}
.pq-media{text-decoration:none}
.pq-pick{background:color-mix(in srgb,var(--cta) 5%,var(--bg))}
.pq-pick .pq-role{color:color-mix(in srgb,var(--cta2) 80%,#000)}
/* The same block saying no. Warm rather than alarming - it is a finding, not an error, and it
   is usually the most useful thing on the page. */
.pquick.nofit{border-color:color-mix(in srgb,#b45309 34%,var(--line))}
.pquick.nofit .pquick-head{color:#b45309;
  background:linear-gradient(100deg,color-mix(in srgb,#b45309 12%,var(--bg)),
    color-mix(in srgb,#b45309 5%,var(--bg)))}
.nofit-body{padding:15px 18px 17px;font-size:.95rem}
.nofit-body p{margin:0 0 10px}
.nofit-body p:last-child{margin-bottom:0}
.nofit-near{padding:10px 13px;border-radius:var(--radius);background:var(--soft);font-size:.9rem}
.nofit-change{font-size:.88rem;color:var(--muted);padding-left:15px;position:relative}
.nofit-change::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:#b45309}

/* --------------------------------------------------------------- the hook */
/* One line, set large, where a reader who is skimming will land. It is the sentence that says
   why this page is different from the eight they already closed. */
.hook{margin:24px 0;padding:0 0 0 20px;border-left:3px solid var(--accent);
  font-family:var(--font-head);font-size:1.16rem;line-height:1.5;font-weight:600;
  color:var(--ink)}
.hook span{color:var(--accent)}

/* ---------------------------------------------------------------- footer */
/* Logo, the basic and legal pages on one line, the disclosure where it applies, the copyright.
   The category list that used to live here was a second sitemap nobody read. */
.foot{margin-top:64px;border-top:1px solid var(--line);background:var(--soft);padding:34px 0 26px}
.foot-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.foot .brand{max-width:100%}
.foot .brand-text{align-items:flex-start;text-align:left}
.foot-note{font-size:.86rem;color:var(--muted);max-width:60ch;margin:0}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:4px 0 0}
.foot-links a{text-decoration:none;font-size:.95rem;color:var(--ink);padding:4px 0}
.foot-links a:hover{color:var(--accent)}
.foot-disclosure{margin:4px 0 0;max-width:760px;font-size:.78rem;line-height:1.55;color:var(--muted)}
.foot-disclosure b{color:var(--ink)}
.foot-copy{margin:0;font-size:.82rem;color:var(--muted)}

/* ------------------------------------------------------- shared home bits */
.hub-n{display:inline-block;font-size:.72rem;font-weight:700;color:var(--muted);
  letter-spacing:.02em;margin-top:4px}
a:hover .hub-n{color:var(--accent)}

/* the table of contents folds away on a phone without JavaScript */
details.toc summary{cursor:pointer;list-style:none;font-family:var(--font-head);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
details.toc summary::-webkit-details-marker{display:none}
details.toc summary::after{content:"\25BE";margin-left:8px}
details.toc:not([open]) summary::after{content:"\25B8"}
details.toc[open] summary{margin-bottom:10px}

/* the at-a-glance facts under the answer */
.facts{margin:20px 0 26px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.facts table{font-size:.92rem}
.facts caption{padding:10px 14px 8px;font-family:var(--font-head);font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;color:var(--accent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 10%,var(--bg)),var(--bg))}
.facts th{width:38%;background:var(--soft);font-weight:700}
.facts th,.facts td{border-left:0;border-right:0}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}

/* ------------------------------------------------------- buying-guide article */
.trustbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 6px;padding:10px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.tb-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;
  font-weight:800;font-size:.85rem;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.tb-who{line-height:1.4}
.tb-who b{color:var(--ink)}
.tb-how{margin-left:auto;font-weight:700;font-size:.8rem;color:var(--accent);text-decoration:none;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px}
.tb-how:hover{border-color:var(--accent)}
/* The pick stays one tap away on a phone. Only there: on a wide screen the shortlist at the top
   of the page is always in reach, and a bar would sit over the prose for nothing. */
/* on a buying page the photograph is context, not the answer - it must not push the pick down */
.post.buy .hero-img img{max-height:340px;object-fit:cover}
.post.buy details.toc{padding:12px 18px}
.stickybuy{display:none}
@media(max-width:880px){
  .stickybuy{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;
    z-index:55;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:var(--bg);
    border-top:1px solid var(--line);box-shadow:0 -10px 26px -18px rgba(0,0,0,.5)}
  .stickybuy .sb-t{flex:1 1 auto;min-width:0;font-size:.8rem;line-height:1.3;color:var(--muted);
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .stickybuy .sb-t b{color:var(--ink)}
  .stickybuy a.pbuy{flex:0 0 auto;padding:10px 16px;font-size:.88rem}
  body:has(.stickybuy) .foot{padding-bottom:84px}
  body:has(.stickybuy) .ad-sticky{bottom:62px}
}

/* ---------------------------------------------------------------- owner's logo */
.brand.has-logo{max-width:min(260px,62vw)}
.brand .logo-img{height:44px;width:auto;max-width:100%;object-fit:contain;display:block}
.foot .brand .logo-img{height:40px}
.top.centre .brand.has-logo{justify-content:center}

/* ---------------------------------------------------------------- author */
.by-av{width:28px;height:28px;border-radius:50%;object-fit:cover;display:inline-block;
  vertical-align:middle;margin:-3px 7px 0 0}
img.tb-av{object-fit:cover;display:block}
.post-foot.author-box{display:flex;gap:16px;align-items:flex-start;margin-top:36px;padding:20px;
  border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);background:var(--soft);font-size:1rem}
.ab-photo,.ab-mark{width:72px;height:72px;border-radius:50%;flex:none;object-fit:cover}
.ab-mark{display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:1.35rem;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ab-text{min-width:0}
.ab-text b{display:block;font-family:var(--font-head);font-size:1.05rem;line-height:1.3}
.ab-text b a{color:var(--accent);text-decoration:none}
.ab-text b a:hover{text-decoration:underline}
.ab-role{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
.ab-text p{font-size:.9rem;line-height:1.55;margin:.55em 0 .35em;color:var(--ink)}
.ab-text small{font-size:.76rem;color:var(--muted)}
@media(max-width:520px){.post-foot.author-box{padding:16px;gap:12px}.ab-photo,.ab-mark{width:56px;height:56px}}
.author-photo{width:160px;height:160px;border-radius:50%;object-fit:cover;margin:0 0 18px}

/* ---------------------------------------------------------------- home: category cards */
.hc-cats{margin:34px 0 34px}
.hc-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.hc-card{display:flex;flex-direction:column;gap:8px;padding:18px 18px 15px;text-decoration:none;
  border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);background:var(--bg);
  transition:transform .16s,box-shadow .16s,border-color .16s;min-width:0;color:var(--ink)}
.hc-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 16px 34px -24px rgba(0,0,0,.45)}
.hc-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.hc-name{font-family:var(--font-head);font-weight:800;font-size:1.04rem;line-height:1.28}
.hc-blurb{font-size:.855rem;line-height:1.5;color:var(--muted);flex:1;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;
  padding-top:10px;border-top:1px dashed var(--line);font-size:.8rem}
.hc-n{color:var(--muted);font-weight:600}
.hc-go{font-weight:800;color:var(--accent)}
.hc-go::after{content:" \2192"}
@media(max-width:600px){.hc-grid{grid-template-columns:1fr;gap:10px}
  .hc-card{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:3px;padding:14px}
  .hc-ico{grid-row:1 / span 3}
  .hc-blurb{-webkit-line-clamp:2}
  .hc-foot{border-top:0;padding-top:0;margin-top:0}}

/* ---------------------------------------------------------------- category: one page, load more */
.cat-lead{display:grid;gap:20px;margin:22px 0 32px}
@media(min-width:820px){.cat-lead{grid-template-columns:1.35fr 1fr}
  .cat-lead .lead-card.first{grid-row:span 2}
  .cat-lead:has(> .lead-card:only-child){grid-template-columns:1fr}
  .cat-lead .lead-card:not(.first){flex-direction:row}
  .cat-lead .lead-card:not(.first) img{width:40%;height:100%;aspect-ratio:auto;flex:none}}
.lead-card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);overflow:hidden;background:var(--bg);color:var(--ink);
  transition:border-color .16s,box-shadow .16s;min-width:0}
.lead-card:hover{border-color:var(--accent);box-shadow:0 18px 38px -26px rgba(0,0,0,.45)}
.lead-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lc-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;min-width:0}
.lc-body b{font-family:var(--font-head);font-size:1.08rem;line-height:1.3}
.lead-card.first .lc-body b{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.lc-body i{font-style:normal;font-size:.9rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.lc-body .mins{font-size:.76rem;color:var(--muted)}
.lc-tag{align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:3px 9px;border-radius:999px}
.cat-more{margin-top:8px}
.lm-hide{display:none!important}
.lm-wrap{text-align:center;margin:28px 0 8px}
.loadmore{font:inherit;font-weight:800;font-size:.95rem;padding:12px 28px;border-radius:999px;cursor:pointer;
  border:2px solid var(--accent);background:var(--bg);color:var(--accent);transition:background .15s,color .15s}
.loadmore:hover,.loadmore:focus-visible{background:var(--accent);color:#fff}
.lm-left{font-weight:600;opacity:.8}

/* Shelf - affiliate catalogue: a grey store floor, white shelves, one button colour */
.t-shelf{--bg:#ffffff;--soft:#f2f4f7;background:#eef1f5}
.t-shelf body{background:#eef1f5}
.t-shelf main{background:#eef1f5}
.t-shelf .top{background:var(--ink);border-bottom:3px solid var(--cta);color:#fff}
.t-shelf .top .brand-text b{color:#fff}
.t-shelf .top .brand-text i{color:rgba(255,255,255,.66)}
.t-shelf .top .nav a{color:#e9edf3;font-weight:600}
.t-shelf .top .nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.t-shelf .burger{background:transparent;border-color:rgba(255,255,255,.35)}
.t-shelf .burger span,.t-shelf .burger span::before,.t-shelf .burger span::after{background:#fff}
@media(max-width:880px){.t-shelf .nav{background:var(--ink)}.t-shelf .nav a{border-bottom-color:rgba(255,255,255,.1)}}
.t-shelf .sh-hero{padding:34px 0 8px}
.t-shelf .sh-hero-in{background:var(--bg);border-radius:calc(var(--radius) + 8px);padding:30px 30px 26px;
  display:grid;gap:22px;align-items:center;box-shadow:0 1px 3px rgba(16,24,40,.08)}
@media(min-width:900px){.t-shelf .sh-hero-in{grid-template-columns:1.3fr 1fr;padding:38px 42px}}
.t-shelf .sh-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cta)}
.t-shelf .sh-hero h1{font-size:clamp(1.9rem,4.4vw,2.9rem);letter-spacing:-.025em;margin:.2em 0 .35em;max-width:22ch}
.t-shelf .sh-hero p{color:var(--muted);font-size:1.05rem;margin:0;max-width:58ch}
.t-shelf .sh-badges{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.t-shelf .sh-badges li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;
  background:var(--soft);font-size:.88rem;color:var(--muted);line-height:1.4}
.t-shelf .sh-badges b{display:block;color:var(--ink);font-size:.92rem}
.t-shelf .sh-badges .ic{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--cta) 14%,#fff);color:var(--cta2);font-weight:900}
.t-shelf .hc-cats{margin:26px 0}
.t-shelf .rule{border:0}
.t-shelf .hc-card{border:0;box-shadow:0 1px 3px rgba(16,24,40,.08);border-radius:calc(var(--radius) + 6px)}
.t-shelf .hc-card:hover{box-shadow:0 18px 36px -22px rgba(16,24,40,.45)}
.t-shelf .hc-ico{border-radius:10px;background:var(--ink)}
.t-shelf .hc-go{color:var(--cta2)}
.t-shelf .sh-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-bottom:10px}
@media(min-width:900px){.t-shelf .sh-grid{grid-template-columns:repeat(3,1fr)}
  .t-shelf .sh-card:first-child:not(:only-child){grid-column:span 2;flex-direction:row}
  .t-shelf .sh-card:first-child:not(:only-child) .sh-media{flex:0 0 55%}
  .t-shelf .sh-card:first-child:not(:only-child) .sh-media img{height:100%;aspect-ratio:auto}
  .t-shelf .sh-card:first-child:not(:only-child) h3{font-size:1.35rem}}
.t-shelf .sh-card{display:flex;flex-direction:column;background:var(--bg);border-radius:calc(var(--radius) + 6px);
  overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.08);
  transition:box-shadow .16s,transform .16s;position:relative}
.t-shelf .sh-card:hover{box-shadow:0 22px 40px -24px rgba(16,24,40,.5);transform:translateY(-2px)}
.t-shelf .sh-media{background:#fff;padding:0}
.t-shelf .sh-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.t-shelf .sh-flag{position:absolute;top:12px;left:12px;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:var(--bg);color:var(--ink);padding:4px 9px;border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.18)}
.t-shelf .sh-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.t-shelf .sh-body h3{font-size:1.02rem;line-height:1.35;margin:0}
.t-shelf .sh-body p{font-size:.86rem;color:var(--muted);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.t-shelf .sh-btn{margin-top:8px;text-align:center;font-weight:800;font-size:.9rem;color:#fff;padding:11px 14px;
  border-radius:10px;background:linear-gradient(180deg,var(--cta),var(--cta2))}
.t-shelf .sh-btn::after{content:" \2192"}
.t-shelf .wrap.narrow .post,.t-shelf .post.buy{background:var(--bg);border-radius:calc(var(--radius) + 8px);
  padding:22px clamp(16px,4vw,38px) 30px;margin-top:14px;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.t-shelf .related{background:var(--bg);border-radius:calc(var(--radius) + 8px);padding:20px;margin-top:22px;border-top:0}
.t-shelf .cat-head{background:var(--bg);border-radius:calc(var(--radius) + 8px);padding:22px 24px;margin-top:18px;border:0}
.t-shelf .lead-card,.t-shelf .card,.t-shelf .entry{border:0;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.t-shelf .card,.t-shelf .entry{background:var(--bg);border-radius:calc(var(--radius) + 6px);padding:12px}
.t-shelf .loadmore{border-color:var(--ink);color:var(--ink);background:var(--bg)}
.t-shelf .loadmore:hover{background:var(--ink);color:#fff}
.t-shelf .foot{background:var(--ink);border-top:0}
.t-shelf .foot,.t-shelf .foot-links a,.t-shelf .foot .brand-text b{color:#e9edf3}
.t-shelf .foot-copy,.t-shelf .foot-disclosure,.t-shelf .foot .brand-text i,.t-shelf .foot-note{color:#aab3c2}
.t-shelf .foot-disclosure b{color:#fff}
.t-shelf .body h2{font-size:clamp(1.3rem,2.4vw,1.6rem)}
.t-shelf .pquick{border-radius:calc(var(--radius) + 6px)}