/* ============================================================
   PickWorth — editorial print-inspired stylesheet
   Light, calm, restrained. No gradients, no glassmorphism,
   no neon. Feels like a magazine you'd actually read.
   Zero build step. Cloudflare Pages ready.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* paper + ink */
  --paper:        #faf8f3;
  --paper-2:      #f3efe6;
  --panel:        #ffffff;
  --ink:          #1c1a17;
  --ink-2:        #433f3a;
  --muted:        #8b8478;
  --faint:        #b6afa3;
  --line:         #e4ded1;
  --line-2:       #d8d1c1;

  /* single accent — used sparingly */
  --accent:       #b8503a;
  --accent-2:     #93381f;
  --accent-soft:  #f3e2dd;

  /* functional */
  --good:         #4a7548;
  --good-soft:    #e5eee3;
  --bad:          #ab4433;
  --bad-soft:     #f5e2dd;
  --neutral:      #6b665e;

  /* type */
  --font-serif:  "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-sans:   "Avenir Next","Segoe UI","Helvetica Neue",system-ui,sans-serif;
  --font-mono:   "SFMono-Regular",Consolas,Menlo,monospace;

  --max: 1080px;
  --radius: 4px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-serif);
  color:var(--ink);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2rem,4.4vw,3rem);margin:.2em 0 .4em}
h2{font-size:1.6rem;margin:1.6em 0 .5em}
h3{font-size:1.18rem;margin:.8em 0 .3em}
p{margin:.7em 0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
img{max-width:100%}

/* ---------- decorative hairline rule ---------- */
.rule{
  display:flex;align-items:center;gap:14px;
  color:var(--faint);margin:44px 0;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(250,248,243,.92);
  backdrop-filter:saturate(120%);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;height:58px}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-serif);font-weight:700;font-size:1.32rem;
  color:var(--ink);letter-spacing:-.01em;
}
.brand svg{width:26px;height:26px;color:var(--accent);flex:0 0 auto}
.menu{display:flex;gap:30px;align-items:center;font-size:.92rem}
.menu a{color:var(--ink-2);position:relative;padding:6px 0}
.menu a:hover{color:var(--ink);text-decoration:none}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;
  height:1.5px;background:var(--accent);transition:right .25s ease;
}
.menu a:hover::after{right:0}
.menu a.ghost{
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:6px 14px;color:var(--ink);
}
.menu a.ghost::after{display:none}

/* ---------- hero (text + illustration) ----------
   Mobile-first: single column, illustration hidden on phones. The
   two-column desktop grid is applied ONLY by body.is-desktop below. */
.hero-grid{
  display:block;padding:28px 0 16px;
}
.hero-grid .col-text{max-width:100%}
.hero-grid .col-illu{display:none}
.illu{width:100%;max-width:300px;height:auto}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0 0 16px;font-weight:500;
}
.lead{color:var(--ink-2);font-size:1.14rem;line-height:1.75;max-width:58ch}

/* stats */
.hero-stats{display:flex;gap:40px;margin:30px 0 0;flex-wrap:wrap}
.hero-stats > div{display:flex;flex-direction:column;gap:2px}
.hero-stats strong{
  font-family:var(--font-serif);font-size:2rem;
  color:var(--ink);font-weight:600;line-height:1.1;
}
.hero-stats span{
  font-size:.78rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;
}

/* ---------- section furniture ---------- */
.section-head{
  display:flex;align-items:baseline;gap:14px;margin:52px 0 20px;
}
.section-head h2{margin:0}
.section-head .count{
  font-family:var(--font-mono);font-size:12px;color:var(--faint);
}

/* ---------- cards ---------- */
.grid-3{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0 8px}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 24px 22px;
  position:relative;
  transition:border-color .2s ease,transform .2s ease;
}
.card::before{
  content:"";position:absolute;top:-1px;left:24px;
  width:40px;height:2px;background:var(--accent);
  opacity:0;transition:opacity .2s;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card:hover::before{opacity:1}
.card h3{font-size:1.12rem;margin:.5em 0 .3em}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent)}
.card p{color:var(--ink-2);font-size:.95rem;line-height:1.6;margin:0 0 16px}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-icon{width:28px;height:28px;color:var(--accent);flex:0 0 auto}

/* tags */
.tag{
  display:inline-block;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  padding:3px 9px;border-radius:2px;font-weight:500;
}
.tag.teal{color:var(--good);background:var(--good-soft)}
.tag.plain{color:var(--neutral);background:var(--paper-2)}

.more{
  font-size:.9rem;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;
}
.more::after{content:"\2192";transition:transform .2s}
.more:hover::after{transform:translateX(3px)}

/* ---------- featured comparison row ----------
   Mobile-first: single stacked block; the desktop 3-column grid
   (icon | text | votes) is applied ONLY by body.is-desktop below. */
.feature{
  display:block;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin:14px 0;
  transition:border-color .2s;
}
.feature:hover{border-color:var(--line-2)}
.feature .f-icon{width:34px;height:34px;margin-bottom:8px;color:var(--accent)}
.feature h3{font-size:1.32rem;margin:0 0 4px}
.feature p{margin:0;color:var(--ink-2);font-size:.95rem}
.feature .f-votes{
  font-family:var(--font-serif);font-size:1.5rem;color:var(--ink);
  text-align:right;line-height:1.1;
}
.feature .f-votes span{
  display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;color:var(--muted);text-transform:uppercase;
}

/* ---------- method chain ----------
   Mobile-first: steps stack vertically by default; the 5-column
   desktop row is applied ONLY by body.is-desktop below. */
.method-strip{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px 34px 30px;margin:36px 0;
}
.method-strip h2{margin-top:0}
.steps{
  list-style:none;margin:24px 0 0;padding:0;
  display:block;
}
.steps li{position:relative;padding:0 0 22px;border-top:none}
.steps li .n{
  display:inline-flex;margin-right:10px;
  width:22px;height:22px;
  background:var(--accent);color:#fff;
  font-family:var(--font-mono);font-size:11px;
  align-items:center;justify-content:center;border-radius:50%;
}
.steps li strong{
  display:inline-block;color:var(--ink);font-family:var(--font-serif);
  font-size:.97rem;margin-bottom:4px;
}
.steps li span{display:block;font-size:.83rem;color:var(--muted);line-height:1.5;margin-top:2px}

/* ---------- article layout ---------- */
.post{padding:40px 0;max-width:760px;margin:0 auto}
.post .kicker{
  color:var(--accent);font-family:var(--font-mono);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;
}
.meta{
  color:var(--muted);font-size:.88rem;display:flex;gap:18px;flex-wrap:wrap;
  margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.byline{display:flex;gap:12px;align-items:center}
.byline .avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--accent-soft);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);color:var(--accent);font-size:1rem;font-weight:600;
}
.byline .who strong{display:block;font-size:.9rem;color:var(--ink);font-weight:600}
.byline .who span{color:var(--muted);font-size:.8rem}

figure{margin:26px 0}
figcaption{color:var(--muted);font-size:.82rem;margin-top:8px}

/* verdict + callout */
.verdict{
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:20px 24px;margin:28px 0;
}
.verdict h3{margin:0 0 .4em;font-size:1.1rem}
.callout{
  border-left:2px solid var(--accent);background:var(--panel);
  border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:24px 0;
}
.callout.warn{border-color:var(--bad);background:var(--bad-soft)}

/* comparison table */
table.compare{
  width:100%;border-collapse:collapse;margin:20px 0;font-size:.94rem;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
table.compare th,table.compare td{
  padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
table.compare thead th{
  background:var(--paper-2);font-family:var(--font-mono);font-size:.73rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600;
  border-bottom:1.5px solid var(--line-2);
}
table.compare td.good{color:var(--good);font-weight:500}
table.compare td.bad{color:var(--bad);font-weight:500}
table.compare tr:last-child td{border-bottom:none}

/* sources */
.sources ol{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 18px 18px 44px;margin:0;
}
.sources li{margin:.55em 0;font-size:.88rem;color:var(--ink-2)}
.sources a{color:var(--accent)}

/* ad slot placeholder */
.ad-slot{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  min-height:80px;display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-family:var(--font-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;margin:28px 0;
}
.ad-slot .ad-label{
  position:absolute;margin-top:-26px;padding:2px 8px;font-size:9px;
  letter-spacing:.22em;color:var(--faint);background:var(--paper);
  border:1px solid var(--line);border-radius:999px;
}
.ad-slot{position:relative}
.ad-slot .ad-frame{width:100%;height:60px}

/* footer */
.site-footer{
  border-top:1px solid var(--line);margin-top:64px;padding:34px 0;
  background:var(--paper-2);
}
.disclosure{color:var(--muted);font-size:.84rem;max-width:64ch;margin:0 0 14px}
.fineprint{color:var(--faint);font-size:.78rem;margin:0}
.fineprint a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .2s}
.fineprint a:hover{color:var(--ink);text-decoration-thickness:2px}

.empty{
  background:var(--panel);border:1px dashed var(--line-2);
  border-radius:var(--radius);padding:24px;text-align:center;
  color:var(--muted);font-size:.92rem;
}

/* ============================================================
   Two independent device UIs — same routes, same content.
   Mobile is the default (mobile-first, GEO/Google mobile-crawl friendly).
   body.is-desktop (set by assets/js/device-ui.js) switches to the
   desktop layout. The two never share rules — no @media cascade.
   Content (text, H1/H2, tables, JSON-LD) is byte-identical in both;
   only navigation + reflow differ. CSS hides the "other" device's
   nav but never removes body content.
   ============================================================ */

/* ---------- mobile layout (default) ---------- */
body{padding-bottom:64px}            /* room for the bottom tab bar */

.site-header{background:var(--paper);position:relative;top:auto;z-index:auto}
.nav{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:10px;height:58px;padding:0;
}
.brand{font-size:1.14rem}
.brand svg{width:22px;height:22px}
.nav .menu{display:none}              /* top menu off on mobile; bottom tabs take over */

.hero-grid{display:block;padding:28px 0 16px}
.hero-grid .col-text{max-width:100%;margin-bottom:16px}
.hero-grid .col-illu{display:none}    /* illustration not worth space on small screens */

.section-head{margin:30px 0 14px;flex-wrap:wrap;gap:6px}
.section-head h2{font-size:1.3rem}

.grid-3{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0}
.card{padding:16px 18px 14px}
.card h3{font-size:1.04rem}
.card p{font-size:.9rem;margin:0 0 12px}

.feature{display:block;padding:16px 18px;margin:14px 0}
.feature h3{font-size:1.16rem}
.feature p{font-size:.9rem;margin-top:4px}
.feature .f-icon{width:34px;height:34px;margin-bottom:8px}
.feature .f-votes{display:none}

.steps{display:block;margin:18px 0 0}
.steps li{padding-top:0;padding-bottom:24px;border-top:none}
.steps li:first-child{padding-bottom:24px}
.steps li:last-child{grid-column:auto}

/* compact archive row: stack title / desc / meta vertically */
.rowlist a{
  display:block;padding:14px 2px;
  border-bottom:1px solid var(--line);
}
.rowlist .kind{
  display:inline-block;padding:2px 7px;background:var(--paper-2);
  border-radius:2px;color:var(--muted);font-size:9.5px;
}
.rowlist h3{font-size:1.02rem;margin:8px 0 4px}
.rowlist p{font-size:.86rem;line-height:1.5}
.rowlist .date{display:block;margin-top:6px;padding-top:0}

/* article */
.post{padding:26px 0 34px;max-width:100%}
.pros-cons{grid-template-columns:1fr;gap:12px;margin:18px 0}
.pros-cons .pc{padding:14px 16px}
.toc{padding:12px 14px}
.toc ol{columns:1;column-gap:0;padding-left:18px}
.verdict-grid{display:block;gap:12px;margin:18px 0}
.verdict-grid .verdict{margin:0}
.callout{padding:14px 16px;margin:18px 0}

/* comparison table: horizontal scroll on narrow */
table.compare{font-size:.86rem}
table.compare th,table.compare td{padding:10px 10px}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* footer: tighter on mobile */
.site-footer{margin-top:40px;padding:26px 0}

/* mobile bottom tab bar — always present in DOM, styled for mobile.
   Hidden on desktop by the .is-desktop rules below (never removed). */
.mtab{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;align-items:stretch;
  background:rgba(250,248,243,.96);
  border-top:1px solid var(--line-2);
  -webkit-backdrop-filter:saturate(120%);backdrop-filter:saturate(120%);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mtab a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 2px;text-decoration:none;
  color:var(--faint);font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;
}
.mtab a svg{width:20px;height:20px}
.mtab a.on{color:var(--accent)}

/* ---------- desktop layout (body.is-desktop) ---------- */
body.is-desktop{padding-bottom:0}
body.is-desktop .site-header{position:sticky;top:0;z-index:20;background:rgba(250,248,243,.92)}
body.is-desktop .nav{
  display:flex;grid-template-columns:none;justify-content:space-between;
  align-items:center;height:72px;gap:0;
}
body.is-desktop .brand{font-size:1.32rem}
body.is-desktop .brand svg{width:26px;height:26px}
body.is-desktop .nav .menu{
  display:flex;gap:30px;align-items:center;font-size:.92rem;
}
body.is-desktop .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;padding:52px 0 36px}
body.is-desktop .hero-grid .col-text{max-width:600px;margin-bottom:0}
body.is-desktop .hero-grid .col-illu{display:flex;justify-content:center}
body.is-desktop .illu{max-width:330px}
body.is-desktop .section-head{margin:52px 0 20px;flex-wrap:nowrap;gap:14px}
body.is-desktop .section-head h2{font-size:1.6rem}
body.is-desktop .grid-3{grid-template-columns:repeat(3,1fr);gap:24px;margin:24px 0 8px}
body.is-desktop .card{padding:24px 24px 22px}
body.is-desktop .card h3{font-size:1.12rem}
body.is-desktop .card p{font-size:.95rem;margin:0 0 16px}
body.is-desktop .feature{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:24px 28px;margin:20px 0}
body.is-desktop .feature h3{font-size:1.32rem}
body.is-desktop .feature p{font-size:.95rem}
body.is-desktop .feature .f-icon{width:44px;height:44px;margin-bottom:0}
body.is-desktop .feature .f-votes{display:block}
body.is-desktop .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:24px 0 0}
body.is-desktop .steps li{padding-top:30px;padding-bottom:0;border-top:1px solid var(--line)}
body.is-desktop .steps li:last-child{grid-column:1/-1}
body.is-desktop .rowlist a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"kind title date" "kind desc date";
  gap:6px 16px;padding:18px 4px;
}
body.is-desktop .rowlist .kind{display:block;padding:3px 0;background:none}
body.is-desktop .rowlist h3{grid-area:title;font-size:1.08rem;margin:0}
body.is-desktop .rowlist p{grid-area:desc;font-size:.92rem;line-height:1.5}
body.is-desktop .rowlist .date{grid-area:date;display:block;padding-top:3px;margin-top:0}
body.is-desktop .post{padding:40px 0;max-width:760px}
body.is-desktop .pros-cons{grid-template-columns:1fr 1fr;gap:20px;margin:26px 0}
body.is-desktop .pros-cons .pc{padding:20px 22px}
body.is-desktop .toc{padding:16px 20px}
body.is-desktop .toc ol{columns:2;column-gap:32px}
body.is-desktop .verdict-grid{display:flex;align-items:flex-start;gap:22px;margin:26px 0}
body.is-desktop .verdict-grid .verdict{flex:1}
body.is-desktop .verdict-grid .score{flex:0 0 96px;justify-content:center}
body.is-desktop .callout{padding:16px 20px;margin:24px 0}
body.is-desktop .site-footer{margin-top:64px;padding:34px 0}
body.is-desktop .mtab{display:none}        /* desktop: bottom tabs off, top menu on */

/* ============================================================
   Article & page-layout components (templates / sample pages)
   ============================================================ */

/* template-preview banner (shown on sample pages only) */
.tpl-banner{
  background:var(--paper-2);border-bottom:1px solid var(--line);
  color:var(--muted);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
  padding:8px 16px;
}

/* breadcrumb */
.breadcrumb{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
  margin:28px 0 0;display:flex;gap:8px;flex-wrap:wrap;
}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep::before{content:"/"}

/* article head */
.article-head{max-width:760px;padding-top:18px}
.article-head .meta{margin-top:18px}

/* score badge */
.score{
  display:inline-flex;flex-direction:column;align-items:center;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;min-width:86px;
}
.score strong{font-family:var(--font-serif);font-size:2rem;color:var(--ink);line-height:1}
.score span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:6px;
}
.score.good{border-color:var(--good)}
.score.good strong{color:var(--good)}
.score.mid{border-color:#c2a251}
.score.mid strong{color:#8a6d1d}
.score.bad{border-color:var(--bad)}
.score.bad strong{color:var(--bad)}

/* verdict row: score + text.
   Mobile-first: single stacked column by default (score block on top,
   short-version text below). The desktop side-by-side layout is applied
   ONLY by the body.is-desktop rules further down, so a narrow viewport
   (mobile browser or mobile crawler) never gets the cramped two-column
   verdict that was clipping the text into one-word lines. */
.verdict-grid{display:block;margin:18px 0}
.verdict-grid .verdict{margin:0}
.verdict-grid .score{margin:0 0 14px}

/* pros / cons.
   Mobile-first: single column by default; the two-column desktop layout
   comes only from the body.is-desktop block below. */
.pros-cons{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0}
.pros-cons .pc{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;
}
.pros-cons .pc h3{
  font-size:1rem;margin:0 0 10px;display:flex;align-items:center;gap:8px;
}
.pros-cons .pc.good h3{color:var(--good)}
.pros-cons .pc.bad h3{color:var(--bad)}
.pros-cons ul{margin:0;padding-left:18px}
.pros-cons li{margin:.45em 0;font-size:.94rem}

/* table of contents */
.toc{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 20px;margin:24px 0;
}
.toc strong{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px;
}
.toc ol{margin:0;padding-left:20px;font-size:.9rem;columns:2;column-gap:32px}
.toc li{margin:.3em 0}
.toc a{color:var(--ink-2)}
.toc a:hover{color:var(--accent)}

/* placeholder block (unwritten content) */
.ph{
  border:1px dashed var(--line-2);border-radius:var(--radius);
  background:var(--paper-2);color:var(--faint);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:22px;text-align:center;margin:22px 0;
}

/* GEO: key-answers block — a citable "direct answer" definition box that
   sits between the verdict and the TOC. Answer engines pull this. */
.key-answers{margin:0 0 20px}
.key-answers .key-answer{
  font-size:1rem;line-height:1.55;color:var(--ink);
  padding:14px 16px;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);
}
.key-answers .key-answer strong{
  color:var(--accent);font-weight:600;display:block;margin-bottom:4px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;
}
.key-answers .qa-list{margin-top:12px}
.key-answers .qa-list .qa{padding:10px 0;border-bottom:1px solid var(--line)}
.key-answers .qa-list .qa:last-child{border-bottom:none}
.key-answers .qa-list dt{
  font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:4px;
}
.key-answers .qa-list dd{
  margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.5;
}

/* 404 */
.notfound{text-align:center;padding:90px 0 70px}
.notfound h1{font-size:5rem;margin:0 0 .1em;color:var(--accent)}
.notfound p{color:var(--muted);max-width:46ch;margin:0 auto 22px}

/* archive / index rows — mobile-first (stacked).
   This block sits late in the file, so it must describe the DEFAULT
   (mobile) layout, not the desktop one. The desktop grid
   (kind | title/desc | date) is applied ONLY by the body.is-desktop
   rules above; otherwise the late base rule would collapse the title
   column and wrap the text one word per line on phones. */
.rowlist{border-top:1px solid var(--line);margin:20px 0}
.rowlist a{
  display:block;
  padding:14px 4px;border-bottom:1px solid var(--line);
}
.rowlist .kind{
  display:inline-block;padding:2px 8px;background:var(--paper-2);
  border-radius:2px;margin-bottom:8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.rowlist h3{margin:0 0 4px;font-size:1.04rem}
.rowlist p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.55}
.rowlist .date{
  display:block;margin-top:8px;padding-top:0;
  font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.08em;
}
.rowlist a:hover{background:var(--panel)}
.rowlist a:hover h3{color:var(--accent)}

/* mobile reflow of the article components is defined in the
   "Two independent device UIs" block above; no leftover
   breakpoint cascade here. */

/* ============================================================
   Performance & accessibility hardening (no visual change on
   the default path — only motion-reduced users and off-screen
   content are affected).
   ============================================================ */

/* 1) Respect the OS "reduce motion" setting: kill smooth scroll
      and every transition. Content is never removed, so crawlers
      and standard users are unaffected. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* 2) content-visibility on long article bodies: the browser skips
      layout/paint for off-screen sections (faster LCP/CLS), while
      contain-intrinsic-size reserves an estimate so layout stays
      stable (no CLS jump when the section is realized).
      .post is the <article> wrapper on review/compare/list pages. */
.post{
  content-visibility:auto;
  contain-intrinsic-size:auto 1200px;
}