/* We Know Rice — the design system.
   One file, cached a year, versioned from its mtime by asset().

   LIGHT ONLY, deliberately. The site had a prefers-color-scheme dark palette
   that I never once looked at in a light browser, and it shipped looking like a
   default theme. A second palette nobody checks is worse than no second palette.

   No webfont: the system stack is a request and ~50 KB the reader does not wait
   for, and on a site judged by how fast a buy button appears that is the trade. */

:root {
  color-scheme: light;

  --bg:         #f7f5f1;   /* warm paper */
  --surface:    #ffffff;
  --surface-2:  #fbfaf8;
  --ink:        #1b1815;
  --ink-soft:   #625b53;
  --ink-faint:  #8b827a;
  --line:       #e6e1d8;
  --line-soft:  #f0ece5;

  --brand:      #9d4318;   /* toasted grain, for headings and links */
  --brand-soft: #fdf3ec;
  --cta:        #e2661a;   /* the only orange on the site, reserved for buying */
  --cta-dark:   #c4540f;
  --star:       #f0a92b;
  --good:       #2c7a45;
  --bad:        #b03232;

  --radius:     14px;
  --radius-sm:  9px;
  --wrap:       1250px;   /* masthead and footer */
  --content:    1000px;   /* 80% of it: the reading column (Dean, 2026-09-05) */
  --shadow:     0 1px 2px rgba(27,24,21,.05), 0 6px 20px rgba(27,24,21,.06);
  --shadow-lg:  0 2px 4px rgba(27,24,21,.06), 0 14px 40px rgba(27,24,21,.10);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.68 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.018em; margin: 0 0 .5em; font-weight: 750; }
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem); margin-top: 2.2em; }
h3 { font-size: 1.35rem; margin-top: 1.8em; }
h4 { font-size: 1.1rem; }
p, ul, ol { margin: 0 0 1.15em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* The reading column is 80% of the site width. The masthead and footer keep the
   full 1250px; everything inside <main> comes in to 1000px, so a heading, a
   table and a paragraph all end at the same place. */
main .wrap { width: min(100% - 2.5rem, var(--content)); }

/* Index pages go back out to the full width (Dean, 2026-09-05). A reading column
   is narrow because a long line of prose is hard to follow; a grid of products
   has no such problem and gains a column at every breakpoint from the room. */
.page--category main .wrap { width: min(100% - 2.5rem, var(--wrap)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--surface); padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 3px; }

/* ---------------------------------------------------------------- masthead */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.masthead__inner { display: flex; align-items: center; gap: 1rem; min-height: 4.9rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
/* Height drives the size and the width follows the art, so a site whose mark or
   wordmark is a different shape needs no CSS change, only its own files. */
.brand__mark { display: block; flex: none; height: 2.5rem; width: auto; }
.brand__wordmark { display: block; height: 2.625rem; width: auto; }

/* The nav collapses to a button at 60rem, but the lockup only runs out of room
   on a phone: at full size the brand, the button and the gutters come to 420px,
   which overflows a 375px screen. */
@media (max-width: 30rem) {
  .brand { gap: .5rem; }
  .brand__mark { height: 1.875rem; }
  .brand__wordmark { height: 1.75rem; }
}

.nav { margin-left: auto; }
.nav__list { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__item > a { display: block; padding: .6rem .8rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-soft); font-size: .96rem; font-weight: 600; }
.nav__item > a:hover { background: var(--bg); color: var(--brand); }
.nav__item > a[aria-current] { color: var(--brand); background: var(--brand-soft); }
.nav__sub { position: absolute; left: 0; top: 100%; min-width: 13rem; margin: 0; padding: .4rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: none; }
.nav__item--has-children:hover .nav__sub, .nav__item--has-children:focus-within .nav__sub { display: block; }
.nav__sub a { display: block; padding: .5rem .7rem; border-radius: 7px; text-decoration: none; color: var(--ink-soft); font-size: .93rem; font-weight: 500; }
.nav__sub a:hover { background: var(--bg); color: var(--brand); }
.navtoggle__btn { display: none; }

@media (max-width: 60rem) {
  .navtoggle__btn { display: flex; flex-direction: column; gap: 4px; margin-left: auto; padding: .6rem; cursor: pointer; border-radius: var(--radius-sm); }
  .navtoggle__btn span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
  .nav { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1.25rem; box-shadow: var(--shadow-lg); }
  .navtoggle:checked ~ .nav { display: block; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 .3rem 1rem; }
}

/* ---------------------------------------------------------------- article */
.article { max-width: none; }
.article__meta { color: var(--ink-faint); font-size: .92rem; margin: -.2em 0 1.6rem; }
.lede { font-size: 1.19rem; line-height: 1.6; color: var(--ink-soft); }
.crumbs { font-size: .87rem; color: var(--ink-faint); margin: 1.25rem 0 .6rem; }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs span { margin: 0 .4rem; }

.article figure { margin: 2rem 0; }
.article figcaption { font-size: .87rem; color: var(--ink-faint); text-align: center; margin-top: .5rem; }
.article img { border-radius: var(--radius-sm); }
.article h2 a, .article h3 a { text-decoration: none; }

.disclosure {
  font-size: .89rem; color: var(--ink-soft); background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  padding: .7rem 1rem; border-radius: var(--radius-sm); margin: 0 0 2rem;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; padding: .85rem 1.5rem; border-radius: var(--radius-sm); font-weight: 700;
  font-size: 1rem; text-decoration: none; line-height: 1.25; border: 1px solid transparent;
  transition: background-color .14s ease, transform .06s ease, box-shadow .14s ease;
}
.btn:active { transform: translateY(1px); }
.btn--buy { background: var(--cta); color: #fff; box-shadow: 0 1px 2px rgba(196,84,15,.25), 0 4px 14px rgba(196,84,15,.22); }
.btn--buy:hover { background: var(--cta-dark); color: #fff; }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: .55rem 1rem; font-size: .9rem; white-space: nowrap; }
.btn__sub { font-size: .72rem; font-weight: 500; opacity: .9; }
.btn--sm .btn__sub { display: none; }
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ---------------------------------------------------------------- stars */
.stars { display: inline-flex; gap: 1px; vertical-align: -1px; }
.stars svg { width: 15px; height: 15px; fill: var(--star); }
.stars svg.is-empty { fill: #dcd6cc; }
.ratings { display: grid; gap: .3rem; margin: 0; }
.ratings div { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.ratings dt { color: var(--ink-soft); min-width: 6.6rem; font-weight: 600; }
.ratings dd { margin: 0; display: flex; align-items: center; }

/* ---------------------------------------------------------------- top picks */
.toppicks { margin: 0 0 3rem; }
.toppicks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; }
.pick {
  position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.pick--editors { border-color: var(--cta); box-shadow: var(--shadow-lg); }
.pick__ribbon {
  position: absolute; top: 0; left: 0; background: var(--cta); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .35rem .7rem; border-bottom-right-radius: var(--radius-sm); z-index: 1;
}
.pick__media { display: grid; place-items: center; padding: 2rem 1.25rem 1rem; background: var(--surface); min-height: 13rem; }
.pick__media img { max-height: 11rem; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.pick__award {
  text-align: center; font-size: .82rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--brand); padding: 0 1rem .85rem;
  border-bottom: 1px solid var(--line-soft);
}
.pick__body { padding: 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.pick__name { margin: 0 0 .45rem; font-size: 1.12rem; line-height: 1.3; }
.pick__name a { color: var(--ink); text-decoration: none; }
.pick__name a:hover { color: var(--brand); }
.pick__blurb { margin: 0 0 1rem; font-size: .95rem; color: var(--ink-soft); }
.pick__ratings { margin: auto 0 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.pick__cta { margin: 0; }

/* ---------------------------------------------------------------- contents */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 0 0 2.5rem; }
.toc__h { margin: 0 0 .75rem; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.toc__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; }
.toc__list li { break-inside: avoid; margin: 0 0 .42rem; font-size: .95rem; }
.toc__list a { color: var(--ink-soft); text-decoration: none; }
.toc__list a:hover { color: var(--brand); text-decoration: underline; }
.toc__list .toc__rank { color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-right: .35rem; font-weight: 700; }
@media (max-width: 40rem) { .toc__list { columns: 1; } }

/* ---------------------------------------------------------------- verdict */
.verdict {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 2px solid var(--cta); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; margin: 0 0 2.5rem; box-shadow: var(--shadow);
}
.verdict__img { flex: none; width: 120px; height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.verdict__text { flex: 1 1 18rem; }
.verdict__h { margin: 0 0 .3rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cta); }
.verdict__name { margin: 0 0 .35rem; font-size: 1.4rem; font-weight: 750; line-height: 1.2; }
.verdict__why { margin: 0 0 1rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- product card */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; margin: 0 0 1.75rem; box-shadow: var(--shadow); scroll-margin-top: 5.5rem;
}
.card__head { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: start; }
.card__rank {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #fff; background: var(--brand);
  padding: .25rem .6rem; border-radius: 999px; margin-bottom: .6rem;
}
.card__award { display: inline-block; margin-left: .4rem; background: var(--cta); }
.card__media { display: grid; place-items: start center; }
.card__media img { max-height: 15rem; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.card__ratings { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); width: 100%; }
.card__name { margin: 0 0 .6rem; font-size: 1.45rem; }
.card__prose { color: var(--ink); }
.card__prose p, .card__prose ul, .card__prose ol { max-width: none; }
.card__prose > p:first-child { margin-top: 0; }
.card__prose ul { padding-left: 1.15rem; }
.card__prose li { margin-bottom: .4rem; }
.card__prose h3, .card__prose h4 { font-size: 1.05rem; margin-top: 1.4em; }

.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.proscons__col { padding: 1rem 1.15rem; }
.proscons__col + .proscons__col { border-left: 1px solid var(--line); }
.proscons h4 { margin: 0 0 .6rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.proscons--pro h4 { color: var(--good); }
.proscons--con h4 { color: var(--bad); }
.proscons ul { margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.proscons li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; }
.proscons li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
.proscons--pro li::before { content: "✓"; color: var(--good); }
.proscons--con li::before { content: "✕"; color: var(--bad); }
.card__cta { margin: 1.5rem 0 0; }

@media (max-width: 52rem) {
  .card { padding: 1.25rem; }
  .card__head { grid-template-columns: 1fr; gap: 1.25rem; }
  .card__media img { max-height: 12rem; }
  .proscons { grid-template-columns: 1fr; }
  .proscons__col + .proscons__col { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- comparison table */
.table-wrap { overflow-x: auto; margin: 0 0 2.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.compare { width: 100%; border-collapse: collapse; font-size: .97rem; }
.compare th, .compare td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.compare thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); background: var(--surface-2); font-weight: 800; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover { background: var(--surface-2); }
.compare tbody th { font-weight: 650; }
.compare tbody th a { color: var(--ink); text-decoration: none; }
.compare tbody th a:hover { color: var(--brand); text-decoration: underline; }
/* Column widths. A width on a cell in an auto-layout table is a preference,
   not an instruction: the surplus from a table narrower than its container gets
   shared out anyway, and the photo column was taking 339px of a 998px table
   while the model names it pushed aside wrapped onto two lines. Giving the
   model column width:100% makes it absorb all of the slack instead, which is
   the column that actually wants it. The others are classed rather than counted
   with nth-child because "Best for" only renders when a guide has awards. */
.compare__img { width: 68px; }
.compare__img img { width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; display: block; }
.compare__model { width: 100%; }
.compare__award, .compare__pro { min-width: 9rem; }
.compare__buy { width: 1%; white-space: nowrap; text-align: right; }

/* ---------------------------------------------------------------- ads */
.ad { margin: 2.5rem 0; text-align: center; min-height: 100px; }
.ad__label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: .35rem; }
/* Only drawn on localhost, where a placement has no unit id yet, so the frames
   can be judged before the units exist. */
.ad__placeholder {
  display: grid; place-items: center; min-height: 100px; border: 1px dashed var(--line);
  border-radius: var(--radius-sm); color: var(--ink-faint); font-size: .78rem;
}
.ad--rail .ad__placeholder { min-height: 600px; }
/* A strip, so the space it reserves looks like the ad that will fill it. */
.ad--strip .ad__placeholder { min-height: 90px; }
.ad__placeholder strong { display: block; font-weight: 650; color: var(--ink-soft); }
.ad__placeholder span { display: block; font-size: .72rem; }
/* An In-article unit takes the page's own type and sits in the flow, so it gets
   no frame of its own. */
.ad--inarticle { margin: 2rem 0; }

/* The side rails.
   Fixed in the margin beside the page's own container, and shown only where
   that margin is actually wide enough, so they can never overlap the content:
   the reading column is 1000px and the index wrap is 1250px, which need
   1000 + 2x(160 + 24) = 1368px and 1250 + 2x(160 + 24) = 1618px of viewport.
   Below that they do not exist at all, which is most visits: 69% of this
   site's traffic is a phone. */
.adrail { display: none; }
@media (min-width: 87rem) {
  .page--recipe .adrail, .page--article .adrail {
    display: block; position: fixed; top: 6.5rem; width: 160px; z-index: 10;
  }
  .page--recipe .adrail--l { left: calc(50% - 500px - 1.5rem - 160px); }
  .page--recipe .adrail--r { left: calc(50% + 500px + 1.5rem); }
  .page--article .adrail--l { left: calc(50% - 500px - 1.5rem - 160px); }
  .page--article .adrail--r { left: calc(50% + 500px + 1.5rem); }
}
@media (min-width: 102rem) {
  .page--category .adrail, .page--home .adrail {
    display: block; position: fixed; top: 6.5rem; width: 160px; z-index: 10;
  }
  .page--category .adrail--l { left: calc(50% - 625px - 1.5rem - 160px); }
  .page--category .adrail--r { left: calc(50% + 625px + 1.5rem); }
  .page--home .adrail--l { left: calc(50% - 625px - 1.5rem - 160px); }
  .page--home .adrail--r { left: calc(50% + 625px + 1.5rem); }
}
.adrail .ad { margin: 0; }

/* ---------------------------------------------------------------- faq */
.article details.faq { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1.15rem; margin: 0 0 .6rem; background: var(--surface); }
.article details.faq summary { cursor: pointer; font-weight: 650; }
.article details.faq[open] summary { margin-bottom: .6rem; }

/* ---------------------------------------------------------------- hubs, tiles */
.hub__head { margin: 1.5rem 0 2rem; }
.feature {
  display: flex; gap: 1.75rem; align-items: center; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; margin: 0 0 2.5rem; box-shadow: var(--shadow); transition: box-shadow .15s ease;
}
.feature:hover { box-shadow: var(--shadow-lg); }
.feature img { flex: none; width: 120px; height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.feature__kicker { margin: 0 0 .25rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--cta); }
.feature__title { margin: 0 0 .3rem; font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; }
.feature__meta { margin: 0; font-size: .93rem; color: var(--ink-faint); }
.feature:hover .feature__title { color: var(--brand); }

.cards { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.5rem; }
/* The tile frame. Source images are every shape from 1:1 to 2.4:1, so the frame
   fixes the size and the image fits inside it; without this the grid is ragged. */
.tile a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); }
.tile__shot {
  display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.tile__shot img { width: 100%; height: 100%; display: block; }
.tile a:hover .tile__shot { box-shadow: var(--shadow); border-color: var(--brand); }
.tile__shot--none { font-size: 2rem; }

/* Photography (recipes, articles) fills the frame. */
.cards--photo .tile__shot { aspect-ratio: 3 / 2; }
.cards--photo .tile__shot img { object-fit: cover; }

/* Product shots are cut-outs on white: they sit inside the frame, never cropped. */
.cards--product .tile__shot { aspect-ratio: 4 / 3; }
.cards--product .tile__shot img { object-fit: contain; padding: 1rem; mix-blend-mode: multiply; }

.tile__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: .7rem; font-weight: 650; font-size: 1rem; line-height: 1.35; letter-spacing: -.01em;
}
.tile a:hover .tile__title { color: var(--brand); }
.tile__excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: .3rem; font-size: .89rem; line-height: 1.45; color: var(--ink-soft);
}
/* A guide card ends this line with how many cookers it compares, and two of the
   thirty have a pick name long enough to fill both lines on its own, which
   clipped the count out of sight. The third line is for those two; the rest
   never reach it, and a row's cards match height anyway. */
.cards--guides .tile__excerpt { -webkit-line-clamp: 3; }
.tile__meta {
  display: block; font-size: .82rem; color: var(--ink-faint);
  margin-top: auto; padding-top: .55rem;
}
/* Each fact stays whole. Without this a card three or four across broke the
   author across lines at the hyphen, so "Ji-hyun" read as "Ji-" then "hyun". */
.tile__bit { white-space: nowrap; }
.tile__dot { margin: 0 .4rem; }

.pager { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: 2.5rem 0; font-size: .95rem; }
.pager a { color: var(--brand); font-weight: 650; text-decoration: none; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pager a:hover { border-color: var(--brand); }
.pager__at { color: var(--ink-faint); }

/* ---------------------------------------------------------------- home */
.hero { padding: 3.5rem 0 2.5rem; max-width: 40rem; }
.hero h1 { margin-bottom: .35rem; }
.hero .lede { margin-bottom: 1.5rem; }
.section__head { display: flex; align-items: baseline; gap: 1rem; margin: 3rem 0 1.25rem; }
.section__head h2 { margin: 0; }
.section__more { margin-left: auto; font-size: .93rem; font-weight: 650; text-decoration: none; }

.linklist { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.linklist li { display: flex; justify-content: space-between; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.linklist a { color: var(--ink); text-decoration: none; font-weight: 600; }
.linklist a:hover { color: var(--brand); text-decoration: underline; }
.linklist time { color: var(--ink-faint); font-size: .88rem; white-space: nowrap; }

/* ---------------------------------------------------------------- related */
.related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
.related__item a { display: flex; gap: .9rem; align-items: center; text-decoration: none; color: var(--ink); font-size: .95rem; font-weight: 600; }
.related__item img { border-radius: var(--radius-sm); object-fit: cover; flex: none; width: 76px; height: 58px; border: 1px solid var(--line); }
.related__item a:hover span { color: var(--brand); text-decoration: underline; }

/* ---------------------------------------------------------------- authors */
.authors { display: grid; gap: 2rem; margin: 1.75rem 0 3rem; }
.author { display: flex; gap: 1.5rem; align-items: flex-start; }
.author .author__photo { flex: none; width: 116px; height: 116px; border-radius: 50%; object-fit: cover; background: var(--surface); border: 1px solid var(--line); }
.author .author__photo--none { display: grid; place-items: center; font-size: 2.5rem; font-weight: 800; color: var(--brand); background: var(--brand-soft); }
.author__name { margin: 0 0 .1rem; font-size: 1.2rem; }
.author__role { margin: 0 0 .7rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); font-weight: 800; }
.author__text p { margin: 0 0 .65rem; }
.author__text p:last-child { margin-bottom: 0; }
@media (max-width: 34rem) { .author { flex-direction: column; gap: .9rem; } .author .author__photo { width: 92px; height: 92px; } }

/* ---------------------------------------------------------------- contact */
/* The contact form sits in a card, so it reads as the thing the page is for
   rather than three boxes trailing off the bottom of the copy. */
.contactform {
  max-width: 40rem; margin-top: 1.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: 0 1px 2px rgba(27,24,21,.04), 0 8px 24px rgba(27,24,21,.05);
}
.contactform .field { margin: 0 0 1.15rem; }
.contactform label { display: block; font-weight: 650; font-size: .92rem; margin-bottom: .4rem; }
.contactform input[type=text], .contactform input[type=email], .contactform textarea {
  width: 100%; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); font: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.contactform input::placeholder, .contactform textarea::placeholder { color: var(--ink-faint); }
/* A visible focus ring in the brand colour: which box you are in should never be
   a guess, and the browser default is a thin outline on a light background. */
.contactform input:focus, .contactform textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.contactform textarea { resize: vertical; min-height: 9rem; }

/* Name and email share a row once there is space for both. min-width:0 or a long
   placeholder pushes the grid wider than its container. */
.contactform__row { display: grid; gap: 0 1rem; }
.contactform__row > .field { min-width: 0; }
@media (min-width: 34rem) { .contactform__row { grid-template-columns: 1fr 1fr; } }

.contactform__send { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.contactform__note { font-size: .87rem; color: var(--ink-soft); }
@media (max-width: 30rem) {
  .contactform { padding: 1.15rem; }
  .contactform__send .btn { width: 100%; justify-content: center; }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formerrors { background: #fdeceb; border: 1px solid var(--bad); color: #8a2222; padding: .85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; }
.formerrors ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.contactform .hint { font-size: .82rem; color: var(--ink-faint); margin: 1rem 0 0; }
.hint { font-size: .87rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------- footer */
.footer { margin-top: 5rem; padding: 3rem 0 2.5rem; background: var(--surface); border-top: 1px solid var(--line); font-size: .95rem; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem; }
.footer__heading { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); margin: 0 0 .75rem; font-weight: 800; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: .45rem; }
.footer__col a { color: var(--ink-soft); text-decoration: none; }
.footer__col a:hover { color: var(--brand); text-decoration: underline; }
.footer__disclosure { margin: 2.5rem 0 .6rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: .89rem; }
.footer__legal { margin: 0; color: var(--ink-faint); font-size: .85rem; }

/* ---------------------------------------------------------------- buy box */
.buybox {
  position: relative; display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap;
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 2px solid var(--cta); border-radius: var(--radius);
  padding: 1.6rem 1.75rem; margin: 0 0 2.5rem; box-shadow: var(--shadow-lg);
}
.buybox__ribbon {
  position: absolute; top: -.75rem; left: 1.5rem; margin: 0; background: var(--cta); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 999px;
}
.buybox__media { flex: none; }
.buybox__media img { width: 160px; height: 160px; object-fit: contain; mix-blend-mode: multiply; }
.buybox__body { flex: 1 1 20rem; }
.buybox__label { margin: 0 0 .15rem; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--cta); }
.buybox__name { margin: 0 0 .5rem; font-size: 1.45rem; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; }
.buybox__note { margin: 0 0 1rem; color: var(--ink-soft); max-width: 46ch; }
.buybox__ratings { margin: 0 0 1.15rem; }
.buybox__small { margin: .7rem 0 0; font-size: .8rem; color: var(--ink-faint); }
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* A repeated CTA at the end of a long article, where the reader has finished
   deciding. The old site's only link was somewhere in the middle of the prose. */
.cta-band {
  display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: var(--radius); padding: 1.35rem 1.6rem; margin: 2.5rem 0;
}
.cta-band__text { margin: 0; font-weight: 650; font-size: 1.05rem; }
.cta-band__sub { margin: .2rem 0 0; font-size: .9rem; color: var(--ink-soft); font-weight: 400; }

/* ---------------------------------------------------------------- trust strip */
.trust {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; list-style: none; margin: 0 0 2.5rem; padding: 0;
  font-size: .93rem; color: var(--ink-soft);
}
.trust li { position: relative; padding-left: 1.5rem; }
.trust li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--good); font-weight: 800;
}
.trust strong { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------- zoom + lightbox */
.zoom {
  display: block; padding: 0; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); cursor: zoom-in; width: 100%; position: relative; overflow: hidden;
}
.zoom img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: .75rem; mix-blend-mode: multiply; }
.zoom__hint {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); padding: .4rem; border-top: 1px solid var(--line-soft); background: var(--surface-2);
}
.zoom:hover { border-color: var(--brand); }
.zoom:hover .zoom__hint { color: var(--brand); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(20,16,12,.82); }
.lightbox img { display: block; max-width: 92vw; max-height: 88vh; border-radius: var(--radius); background: #fff; }
.lightbox__close {
  position: absolute; top: -.9rem; right: -.9rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 0; background: #fff; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------- card CTA, centred */
.card__cta { margin: 1.75rem 0 0; text-align: center; }
.card__cta .btn { min-width: 20rem; }
@media (max-width: 34rem) { .card__cta .btn { min-width: 0; width: 100%; } }

/* ---------------------------------------------------------------- pros and cons */
.proscons { background: var(--surface-2); }
.proscons__col { padding: 1.15rem 1.35rem; }
.proscons h4 {
  margin: 0 0 .75rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
  display: flex; align-items: center; gap: .45rem;
}
.proscons h4::before {
  display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  font-size: .8rem; color: #fff;
}
.proscons--pro h4::before { content: "✓"; background: var(--good); }
.proscons--con h4::before { content: "✕"; background: var(--bad); }
.proscons li { padding-left: 1.6rem; margin-bottom: .55rem; line-height: 1.5; }
.proscons li:last-child { margin-bottom: 0; }
.proscons--pro li::before { content: "✓"; color: var(--good); }
.proscons--con li::before { content: "✕"; color: var(--bad); }

/* ---------------------------------------------------------------- FAQ */
.article details.faq {
  border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius-sm);
  padding: 0; margin: 0 0 .75rem; background: var(--surface); max-width: none; overflow: hidden;
}
.article details.faq summary {
  cursor: pointer; font-weight: 700; padding: .95rem 1.25rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.article details.faq summary::-webkit-details-marker { display: none; }
.article details.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--brand); font-weight: 400; line-height: 1; }
.article details.faq[open] summary::after { content: "\2212"; }
.article details.faq[open] summary { border-bottom: 1px solid var(--line-soft); }
.article details.faq > div { padding: 1rem 1.25rem 1.15rem; }
.article details.faq > div > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- author box */
.authorbox {
  display: flex; gap: 1.35rem; align-items: flex-start; margin: 3rem 0 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}
.authorbox__photo { flex: none; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.authorbox__label { margin: 0 0 .1rem; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
.authorbox__name { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 750; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.authorbox__role { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.authorbox__bio { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .96rem; }
.authorbox__more { margin: 0; font-size: .93rem; font-weight: 650; }
@media (max-width: 34rem) { .authorbox { flex-direction: column; gap: 1rem; padding: 1.25rem; } }
.compare__dash { color: var(--ink-faint); }

/* ---------------------------------------------------------------- conclusion */
/* The closing section of a round-up. It is the last thing a reader sees before
   the verdict, and it was three paragraphs of undifferentiated body copy. */
.article h2#verdict { margin-top: 2.5rem; }
.conclusion {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 2.5rem 0;
}
.conclusion > :first-child { margin-top: 0; }
.conclusion > :last-child { margin-bottom: 0; }
.conclusion h2, .conclusion h3 { margin-top: 0; font-size: 1.35rem; }

/* The article title needs room to breathe under a sticky masthead. */
.article > h1:first-child, .wrap > h1:first-child { margin-top: 2.5rem; }
.crumbs + h1 { margin-top: 1rem; }

/* A table thumbnail is a zoom target too, without the card's frame and hint. */
.zoom--thumb { width: 56px; border: 0; background: transparent; border-radius: 6px; }
.zoom--thumb img { padding: 0; aspect-ratio: 1; }
.zoom--thumb .zoom__hint { display: none; }
.zoom--thumb:hover { outline: 2px solid var(--brand); outline-offset: 2px; }

/* An inline content image that opens the lightbox. It must not gain the card's
   frame, hint bar or full-width block behaviour. */
.zoom--inline { display: inline-block; width: auto; border: 0; background: transparent; padding: 0; border-radius: var(--radius-sm); }
.zoom--inline img { padding: 0; aspect-ratio: auto; width: auto; max-width: 100%; }

/* .zoom img is the product-card treatment: a cut-out photographed on white,
   multiplied so the white box disappears into the page. That is right for a
   review's product shots and wrong for a photograph, which it tints against the
   off-white background, so it is switched off only where the body is editorial. */
.page--recipe .zoom--inline img,
.page--article .zoom--inline img { mix-blend-mode: normal; object-fit: fill; }
.zoom--inline .zoom__hint { display: none; }
.zoom--inline:hover { outline: 2px solid var(--brand); outline-offset: 3px; }
/* Centring an inline photograph means centring its wrapper, not relying on the
   figure's text-align. The lightbox wrapper is a <button>, and a button shrink
   wraps to its content even at display:block, so it sat hard against the left
   edge of a 1000px column with text-align:center having no inline box to act
   on: a 624px photo ended up 188px off centre. */
.article figure .zoom--inline { display: block; width: fit-content; margin-inline: auto; }

/* ---------------------------------------------------------------- article media
   Product photographs come out of the export at up to 1200px and were filling
   the whole 1250px column, so a single picture of a rice cooker was taller than
   the screen. Capped and centred. */
.article figure { margin: 2rem auto; text-align: center; }
.article figure img { max-height: 26rem; width: auto; max-width: 100%; margin-inline: auto; }
.article figure a { display: inline-block; }
.article > p > img, .article .zoom--inline img { max-height: 26rem; width: auto; }
.article > p > img, .article > img { display: block; margin-inline: auto; }
.article figcaption { font-size: .86rem; color: var(--ink-faint); margin-top: .6rem; }
.article figcaption a { color: var(--ink-faint); }

/* ---------------------------------------------------------------- spec table
   The specification block imports as a bare two-column table: a wall of rows
   with no padding, no rules and no visual break from the prose. */
.article .table-wrap { box-shadow: none; }
/* These are for the tables that come out of the old WordPress bodies, which are
   two-column label/value affairs. They must not reach .compare, which is a
   component with its own complete styling and lives inside .article too. They
   were reaching it: `.article table td:first-child { width: 34% }` outranks
   `.compare__img { width: 68px }` on specificity and blew the photo column out
   to 197px, and the same block was also forcing top alignment, zebra striping
   and a bold grey first column onto it. */
.article table:not(.compare) { width: 100%; border-collapse: collapse; font-size: .96rem; }
.article table:not(.compare) td, .article table:not(.compare) th { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.article table:not(.compare) tr:last-child td, .article table:not(.compare) tr:last-child th { border-bottom: 0; }
.article table:not(.compare) tr:nth-child(odd) td { background: var(--surface-2); }
.article table:not(.compare) td:first-child { width: 34%; color: var(--ink-soft); font-weight: 650; }
.article table:not(.compare) td:first-child strong { font-weight: 650; }
.article table:not(.compare) thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); background: var(--surface-2); }
@media (max-width: 34rem) { .article table:not(.compare) td:first-child { width: 45%; } }

/* ---------------------------------------------------------------- quotes */
.article blockquote {
  margin: 2rem 0; padding: 1.35rem 1.6rem 1.35rem 3.4rem; position: relative;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--radius); font-size: 1.05rem; line-height: 1.6; color: var(--ink);
}
.article blockquote::before {
  content: "\201C"; position: absolute; left: 1rem; top: .35rem;
  font-size: 3.2rem; line-height: 1; color: var(--brand); opacity: .35; font-family: Georgia, serif;
}
.article blockquote p { margin: 0 0 .6rem; max-width: none; }
.article blockquote p:last-child { margin-bottom: 0; }
.article blockquote cite, .article blockquote em:last-child {
  display: block; margin-top: .75rem; font-size: .88rem; font-style: normal;
  color: var(--ink-faint); font-weight: 650;
}

/* ---------------------------------------------------------------- rules
   A bare <hr> defaults to border-style: inset, which browsers draw as a groove:
   a light line above a dark one, so it reads as two lines rather than one. It
   was never styled here, so every separator in the imported prose looked
   doubled. One line, quiet, with room around it. */
hr { height: 0; border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.article hr:last-child { display: none; }

/* The review's closing paragraphs, sitting under "Should you buy it?" and above
   the button. Not boxed: the buy box directly beneath it already is, and two
   nested frames read as an error. */
.verdict-prose { margin: 0 0 1.5rem; }
.verdict-prose > :first-child { margin-top: 0; }
.verdict-prose > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- product index
   A retailer-shaped category page for the reviews: facets down the side, rows
   that compare at a glance. No price column, because Amazon prices have to come
   from their API and we have none: the button fetches the real one. */
.pindex { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: start; margin: 1.5rem 0 3rem; }
/* A grid item's min-width is auto, so a column refuses to shrink below the
   min-content of what is inside it. On a 320px phone that pushed the results
   column to 313px inside a 280px slot and gave the homepage a horizontal
   scrollbar. Letting the columns shrink is the fix; nothing else changes. */
.pindex > *, .prod > * { min-width: 0; }
@media (max-width: 56rem) { .pindex { grid-template-columns: 1fr; } }

.pindex__filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; position: sticky; top: 5.5rem; }
@media (max-width: 56rem) { .pindex__filters { position: static; } }
.pindex__filterhead { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.pindex__filterhead h2 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); }
.pindex__clear { margin-left: auto; font-size: .85rem; font-weight: 650; }

.pills { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pills a { display: inline-flex; align-items: center; gap: .4rem; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand); border-radius: 999px; padding: .25rem .65rem; font-size: .82rem; font-weight: 650; text-decoration: none; }
.pills a:hover { background: var(--brand); color: #fff; }

.facet + .facet { margin-top: 1.35rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.facet h3 { margin: 0 0 .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.facet ul { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.facet li a { display: flex; align-items: center; gap: .5rem; padding: .3rem .45rem; border-radius: 7px; text-decoration: none; color: var(--ink-soft); font-size: .92rem; }
.facet li a:hover { background: var(--bg); color: var(--brand); }
.facet li.is-on a { background: var(--brand); color: #fff; font-weight: 650; }
.facet__n { margin-left: auto; font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.facet li.is-on .facet__n { color: rgba(255,255,255,.8); }

.pindex__bar { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pindex__count { margin: 0; color: var(--ink-soft); }
.sorts { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: .25rem; flex-wrap: wrap; font-size: .88rem; }
.sorts a { display: block; padding: .35rem .7rem; border-radius: 999px; text-decoration: none; color: var(--ink-soft); }
.sorts a:hover { background: var(--surface); color: var(--brand); }
.sorts li.is-on a { background: var(--ink); color: #fff; font-weight: 650; }
.pindex__none { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; text-align: center; }

.prods { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.prod { display: grid; grid-template-columns: 9rem 1fr 11rem; gap: 1.5rem; align-items: center;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; transition: box-shadow .15s ease; }
.prod:hover { box-shadow: var(--shadow); }
.prod__shot { display: grid; place-items: center; }
.prod__shot img { width: 100%; height: 8rem; object-fit: contain; mix-blend-mode: multiply; }
.prod__name { margin: 0 0 .35rem; font-size: 1.08rem; line-height: 1.3; }
.prod__name a { color: var(--ink); text-decoration: none; }
.prod__name a:hover { color: var(--brand); }
.prod__score { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; font-size: .88rem; color: var(--ink-soft); font-weight: 650; }
.prod__specs { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: 0 0 .5rem; font-size: .86rem; }
.prod__specs div { display: flex; gap: .35rem; }
.prod__specs dt { color: var(--ink-faint); }
.prod__specs dd { margin: 0; font-weight: 650; }
.prod__blurb { margin: 0; font-size: .89rem; color: var(--ink-faint); }
.prod__act { display: grid; gap: .5rem; }
.prod__act .btn { width: 100%; }

@media (max-width: 46rem) {
  .prod { grid-template-columns: 6rem 1fr; }
  .prod__shot img { height: 5.5rem; }
  .prod__act { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}