/* NoFussDeal homepage styles.
   Loaded on top of editorial.css. The page has one job above the fold: say what
   this site is, prove it with counted figures, and hand the reader on. */

/* ---------- hero ----------
   Claim on the left, the newest review on the right — a review site whose front
   page shows no product is asking to be taken on faith. */
.hero{background:var(--cream);border-bottom:1px solid var(--rule);padding:52px 0 46px}
.hero-in{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center}
.hero-copy{min-width:0}
.hero-eyebrow{margin:0 0 16px;font:800 11px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--flame-deep)}
.hero h1{margin:0;max-width:15ch;
  font:400 clamp(36px,5vw,62px)/1.02 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
/* The one italic in the design, and it earns its place: the whole proposition
   turns on that word. Same family, not a borrowed serif. */
.hero h1 em{font-style:italic;color:var(--flame-deep)}
.hero-lede{margin:20px 0 0;max-width:56ch;font-size:18px;line-height:1.6;color:var(--body)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin:28px 0 0}
.hero-alt{font:700 12.5px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--flame-deep);text-decoration:none;
  padding-top:8px;padding-bottom:8px;display:inline-block}
.hero-alt:hover{text-decoration:underline}

.hero-lead{display:block;background:var(--surface);border:1px solid var(--hairline);
  text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s}
.hero-lead:hover{border-color:var(--flame-deep);box-shadow:0 8px 30px rgba(60,48,34,.13)}
.hl-shot{position:relative;display:block;background:var(--surface)}
.hl-shot img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;padding:26px}
.hl-score{position:absolute;left:0;top:0;background:var(--teal);color:#f2fbfa;
  padding:6px 12px;font:400 18px/1 Georgia,serif;font-variant-numeric:tabular-nums}
.hl-body{display:block;padding:0 20px 20px;border-top:1px solid var(--hairline);padding-top:16px}
.hl-lab{display:block;font:800 10px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--flame-deep);margin-bottom:8px}
.hero-lead b{display:block;font:400 17px/1.35 Charter,Georgia,serif;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.hl-fact{display:block;margin-top:8px;font:400 14px/1.55 "Helvetica Neue",Arial,sans-serif;
  color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.hl-price{display:block;margin-top:11px;font:400 21px/1 Georgia,serif;color:var(--ink);
  font-variant-numeric:tabular-nums}
@media(max-width:940px){
  .hero{padding:38px 0 34px}
  .hero-in{grid-template-columns:1fr;gap:30px}
  .hero-lead{max-width:330px}
  .hero h1{max-width:18ch}
}

/* ---------- trust bar ----------
   Counted figures, not adjectives: the difference between "trusted by
   thousands" and something a reader can check. */
.trust{background:var(--ink);color:#f3ece2}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.13)}
.trust-in>div{background:var(--ink);padding:22px 20px;text-align:center}
.trust b{display:block;font:400 34px/1 Georgia,serif;color:#fff;
  font-variant-numeric:tabular-nums}
.trust span{display:block;margin-top:7px;font:400 11.5px/1.4 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:#bdb1a2}
@media(max-width:760px){
  .trust-in{grid-template-columns:repeat(2,1fr)}
  .trust b{font-size:27px}
  .trust-in>div{padding:18px 14px}
}

main.wrap{padding-bottom:64px}
/* Sections need more air between them than the blocks inside them have, or the
   page reads as one continuous list with headings dropped into it. */
main.wrap section{padding:64px 0 0}

/* A section heading with its "see all" on the same rule. */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.sec-more{font:700 12px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--flame-deep);text-decoration:none;white-space:nowrap;
  /* 12px cap + 8+8 clears the 24px target minimum with room for rounding. */
  padding-top:8px;padding-bottom:8px;display:inline-block}
.sec-more:hover{text-decoration:underline}

/* One line under the rule saying what the section holds.
   The heading names the section; the dek says what the reader gets from it,
   which is the part that decides whether they keep going. The sechead is a flex
   row, so the dek is a sibling and the heading gives up some of its own bottom
   margin to it rather than the dek pulling itself up with a negative one. */
.sechead-dek{margin-bottom:13px}
.sec-dek{margin:0 0 24px;max-width:64ch;
  font:400 15px/1.55 "Helvetica Neue",Arial,sans-serif;color:var(--muted)}

/* ---------- latest reviews: an edited grid ----------
   Three card weights from one card vocabulary. The lead takes two columns and
   both rows with its shot beside the copy; the two secondary items stack in the
   third column as thumbnail-and-title; the rest fall into a plain row beneath.
   Only .cards-home is touched, so /reviews and /category keep the even grid
   that suits a page whose job is to list rather than to lead.

       ┌───────────────────────┬─────────┐
       │                       │  side   │
       │         lead          ├─────────┤
       │                       │  side   │
       ├───────────┬───────────┴─────────┤
       │   card    │   card    │  card   │
       └───────────┴───────────┴─────────┘                                     */

/* Rows 1 and 2 are equal fractions, not auto.
   Left to size themselves the two secondary cards take their own content
   heights and the lead's span only tops up the shortfall, so the pair came out
   at 155px and 133px - a ragged stack that reads as a mistake rather than a
   choice. Equal tracks make the column deliberate. */
.cards-home{grid-template-rows:1fr 1fr auto}
.card-lead{grid-column:1 / span 2;grid-row:1 / span 2;
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr)}
/* The shot fills its half whatever the copy does. It is absolutely positioned
   so it contributes no height of its own: the copy sets the lead's height, and
   that height is what the two rows beside it are then divided between. A shot
   sized by aspect-ratio instead would drive the height itself and leave the
   side cards stretched around empty space. */
/* The lead has to be the tallest thing in the section as well as the widest.
   At the shot's natural height it came out at 302px against 440px ordinary
   cards, so the item being led with was the smallest on the row. */
.card-lead>.shot-link{position:relative;border-bottom:0;border-right:1px solid var(--hairline);
  min-height:390px}
.card-lead>.shot-link img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:34px;aspect-ratio:auto}
.card-lead .score{font:400 18px/1 Georgia,serif;padding:7px 13px}
/* Flexible space above the eyebrow and below the blurb, so the text block sits
   optically centred against the shot however long the highlight runs, with the
   price and action still on the bottom rule. Pinning only the foot left a
   short blurb stranded at the top over 90px of nothing. */
.lead-copy{display:flex;flex-direction:column;min-width:0}
.card-lead .eyebrow{margin-top:auto;padding-top:0}
.card-lead .blurb{margin-bottom:auto}
.card-lead .meta{margin-top:0}
/* The lead is the one card with room to make a case, so it gets display size
   and three lines instead of the row-squaring two the even grid needs. */
.card-lead h3{font-size:28px;line-height:1.16;letter-spacing:-.022em;
  padding:10px 22px 0;min-height:0;-webkit-line-clamp:3;line-clamp:3}
.card-lead .eyebrow,.card-lead .blurb,.card-lead .meta{padding-left:22px;padding-right:22px}
.card-lead .blurb{font-size:15.5px;line-height:1.6;margin-top:12px;
  -webkit-line-clamp:4;line-clamp:4}
.card-lead .meta{padding-top:14px;padding-bottom:14px}
.card-lead .meta .price{font-size:19px}

/* Secondary: enough to recognise the product, not enough to compete with the
   lead. No blurb and no foot rule — a 150px card with a bordered meta row in it
   is three horizontal lines in a small space, which reads as clutter. */
/* The min-height only matters once the card stops being stretched by the lead's
   row span: in the two-column layout it sizes to its own content and collapses
   to about 96px, which crowds the title against the thumbnail. */
.card-side{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:stretch;
  min-height:120px}
.card-side>.shot-link{border-bottom:0;border-right:1px solid var(--hairline)}
.card-side>.shot-link img{width:100%;height:100%;object-fit:contain;padding:12px;aspect-ratio:auto}
.card-side .score{left:0;top:0;padding:4px 8px;font-size:12.5px}
/* Centred rather than spread: at ~180px tall, pinning the price to the bottom
   opens a gap under a one-line title that reads as a missing element. */
.side-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:14px 16px}
.card-side .eyebrow{padding:0;margin:0 0 6px}
.card-side h3{font-size:16.5px;line-height:1.28;padding:0;min-height:0;
  -webkit-line-clamp:3;line-clamp:3}
/* A line of what the product actually is, under the title. Clamped to two
   lines so a long highlight cannot push the price out of the card. */
.side-blurb{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:2;line-clamp:2}
/* With a description above it the title no longer needs three lines of its
   own; two keeps the card the same height as before. */
.card-side h3{-webkit-line-clamp:2;line-clamp:2}
.side-foot{margin:9px 0 0;
  font:400 13px/1.4 "Helvetica Neue",Arial,sans-serif;color:var(--muted)}
.side-foot .price{font:600 15.5px/1.2 "Helvetica Neue",Arial,sans-serif;color:var(--ink);
  font-variant-numeric:tabular-nums}

@media(max-width:1000px){
  /* Two columns: the lead still leads, but across the full width with the
     secondary items rejoining the ordinary flow beneath it. Once nothing spans
     two rows the equal-fraction tracks have no job, and leaving them in place
     would stretch unrelated rows to match each other. */
  .cards-home{grid-template-rows:none}
  .card-lead{grid-column:1 / -1;grid-row:auto}
  .card-side{grid-template-columns:96px minmax(0,1fr)}
}
@media(max-width:620px){
  .card-lead{grid-template-columns:1fr}
  .card-lead>.shot-link{border-right:0;border-bottom:1px solid var(--hairline);
    min-height:0;aspect-ratio:4/3}
  .card-lead h3{font-size:23px}
}

/* ---------- roundup rows ---------- */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.rows>li{border-bottom:1px solid var(--hairline)}
.rows a{display:grid;grid-template-columns:88px 1fr auto;gap:22px;align-items:center;
  padding:16px 0;text-decoration:none;color:inherit}
.row-shot{display:block;background:var(--surface);border:1px solid var(--hairline);
  aspect-ratio:1/1}
.row-shot img{width:100%;height:100%;object-fit:contain;padding:9px}
.row-body{min-width:0}
.rows b{display:block;font:400 21px/1.28 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  color:var(--ink);font-weight:400}
.rows a:hover b{color:var(--flame-deep)}
.row-facts{display:flex;flex-wrap:wrap;gap:5px 20px;margin-top:8px;
  font:400 13px/1.4 "Helvetica Neue",Arial,sans-serif;color:var(--muted)}
.row-facts b{display:inline;font:700 13px/1.4 "Helvetica Neue",Arial,sans-serif;color:var(--ink);
  font-variant-numeric:tabular-nums}
.row-go{font:400 22px/1 Georgia,serif;color:var(--muted);transition:transform .18s ease,color .18s}
.rows a:hover .row-go{color:var(--flame-deep);transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.row-go,.rows a:hover .row-go{transition:none;transform:none}}
@media(max-width:620px){
  .rows a{grid-template-columns:64px 1fr;gap:14px}
  .rows b{font-size:17px}
  .row-go{display:none}
}

/* ---------- category index ----------
   A contents page, not a third grid of boxes. The dotted leader carrying the
   eye from the name to its count is the oldest device in the book for exactly
   this pairing, and it weighs nothing next to six more bordered surfaces. */
.catindex{display:grid;grid-template-columns:repeat(2,1fr);column-gap:60px;
  margin:0;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.catindex a{display:flex;align-items:baseline;gap:12px;
  padding:14px 2px;text-decoration:none;border-bottom:1px solid var(--hairline)}
.ci-name{font:400 19px/1.3 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  color:var(--ink);transition:color .18s}
/* Zero height so the rule sits on the type's baseline rather than through its
   middle; align-self:baseline would give an empty box nothing to align to. */
.ci-lead{flex:1 1 auto;height:0;align-self:center;
  border-bottom:1px dotted var(--faint);transition:border-color .18s}
.ci-n{font:400 17px/1 Georgia,serif;color:var(--muted);font-variant-numeric:tabular-nums;
  transition:color .18s}
.catindex a:hover .ci-name,.catindex a:hover .ci-n{color:var(--flame-deep)}
.catindex a:hover .ci-lead{border-bottom-color:var(--flame-deep)}
@media(max-width:620px){.catindex{grid-template-columns:1fr;column-gap:0}}

/* ---------- how we test ----------
   The one section that argues rather than lists. It is what separates this from
   an affiliate scrape, so it gets the ink ground and the page's last word. */
main.wrap section.method{margin-top:52px;padding:38px 34px 34px;
  background:var(--ink);color:#f3ece2}
.method .sechead{border-bottom-color:var(--flame)}
.method .sechead h2{color:#fff}
.steps{list-style:none;margin:0;padding:0;counter-reset:step;
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px}
.steps>li{counter-increment:step;position:relative;padding-left:44px;
  font:400 16px/1.6 Charter,Georgia,serif;color:#ded4c7}
.steps>li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:1px;
  font:400 20px/1 Georgia,serif;color:var(--flame);font-variant-numeric:tabular-nums}
.steps b{color:#fff;font-weight:600}
.method-note{margin:28px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);
  font:400 14.5px/1.6 "Helvetica Neue",Arial,sans-serif;color:#bdb1a2}
.method-note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.method-note a:hover{color:var(--flame)}
@media(max-width:760px){
  main.wrap section.method{padding:28px 20px 26px}
  .steps{grid-template-columns:1fr;gap:18px}
}