/* Verified Coffee Data — design plan
   Layout: one reading column (~42rem). The verdict lives in a dark espresso band at the top (the page's one bold move);
   everything below is white paper separated by space and hairline rules, not boxes. Phone first.
   Color: espresso ink, crema gold for buying, coffee-cherry red as the single accent, warm neutrals biased to the ink.
   Type: Young Serif for headings (café warmth, used with restraint), Nunito Sans for reading, tabular figures for numbers. */
:root{
  --paper:#ffffff;
  --ink:#241a14;          /* espresso */
  --ink-2:#5b4c42;        /* softer ink for secondary text */
  --rule:#e9e1da;         /* warm hairline */
  --wash:#f6f1ec;         /* very light warm wash for tables and charts */
  --band:#241a14;         /* the verdict band */
  --band-ink:#fbf6f0;
  --crema:#e3a33b;        /* buy */
  --crema-deep:#b9791c;
  --cherry:#9e2a2b;       /* the one accent: links, marks, "our pick" */
  --good:#2f6b3a;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans","Segoe UI",Verdana,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.62}
img{max-width:100%;height:auto;display:block}
a{color:var(--cherry);text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--crema);outline-offset:2px}
.col{max-width:42rem;margin:0 auto;padding-inline:16px}
.num{font-variant-numeric:tabular-nums}

/* top bar: just the name, so the first words a reader or a machine sees are the page's own */
.bar{padding-block:12px;border-bottom:1px solid var(--rule)}
.bar a{font-family:var(--serif);font-size:1.15rem;color:var(--ink);text-decoration:none}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:2rem;letter-spacing:-.01em}
h2{font-size:1.55rem}
h3{font-size:1.15rem}
p{margin:0}
.sub{color:var(--ink-2)}
.small{font-size:.86rem;color:var(--ink-2)}

/* the verdict band */
.verdict{background:var(--band);color:var(--band-ink)}
.verdict .col{padding-block:26px 28px;display:flex;flex-direction:column;gap:16px}
.verdict h1{color:#fff}
.verdict .answer{font-size:1.2rem;line-height:1.5}
.verdict .answer b{color:#fff}
.verdict a{color:#f2c27b}
.pickrow{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:#fff;color:var(--ink);border-radius:6px;padding:12px}
.pickrow img{width:96px;height:96px;object-fit:contain}
.pickrow .tag{font-size:.8rem;font-weight:700;color:var(--cherry);letter-spacing:.02em}
.pickrow .nm{font-family:var(--serif);font-size:1.12rem;line-height:1.2}
.pickrow .buyline{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pickrow.second{background:transparent;color:var(--band-ink);border:1px solid #5a4a40}
.pickrow.second .tag{color:#f2c27b}
.pickrow.second .price{color:#e6dbd1}
.pickrow.second .price b{color:#fff}
.buy{display:inline-block;background:var(--crema);color:#1d1306;font-weight:700;text-decoration:none;padding:11px 18px;border-radius:4px;white-space:nowrap}
.buy:hover{background:#eeb350}
.buy.quiet{background:transparent;border:2px solid currentColor;color:inherit;padding:9px 16px}
.price{font-size:.9rem;color:var(--ink-2)}
.price b{font-size:1.15rem;color:var(--ink)}
.disclose{font-size:.8rem;color:#cbbcaf}

main.col{padding-block:30px 60px;display:flex;flex-direction:column;gap:40px}
section{display:flex;flex-direction:column;gap:14px}
section + section{border-top:1px solid var(--rule);padding-top:32px}
.byline{font-size:.88rem;color:var(--ink-2)}

/* "the short version" comparison */
.vs{width:100%;border-collapse:collapse;font-size:.98rem}
.vs th,.vs td{padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top;text-align:left}
.vs thead th{font-family:var(--serif);font-weight:400;font-size:1.02rem;border-bottom:2px solid var(--ink)}
.vs tbody th{font-weight:700;width:30%}
.vs td.edge{color:var(--good);font-weight:700}
.tablewrap{overflow-x:auto}

/* who should buy which */
.who{display:grid;gap:18px}
.who h3{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.who h3 .mk{font-family:var(--sans);font-size:.78rem;font-weight:700;color:#fff;background:var(--cherry);padding:2px 7px;border-radius:3px}
@media (min-width:720px){.who{grid-template-columns:1fr 1fr;gap:28px}}

/* figures: photos and our own charts */
figure{margin:0;display:flex;flex-direction:column;gap:8px}
figcaption{font-size:.86rem;color:var(--ink-2)}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:var(--wash)}
.chart{background:var(--wash);border-radius:6px;padding:14px}
.chart svg{width:100%;height:auto;display:block}

/* quotes */
blockquote{margin:0;padding:0 0 0 16px;border-left:3px solid var(--crema)}
blockquote p{font-size:1.02rem}
blockquote cite{display:block;font-style:normal;font-size:.84rem;color:var(--ink-2);margin-top:4px}

ul.plain{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:8px}
ul.plain li::marker{color:var(--crema-deep)}

/* picks list on the best-of page */
.picks{display:flex;flex-direction:column}
.pk{display:grid;grid-template-columns:88px 1fr;gap:14px;padding-block:16px;border-bottom:1px solid var(--rule)}
.pk:first-child{padding-top:4px}
.pk > div{min-width:0}
.pk img{width:88px;height:88px;object-fit:contain}
.pk .tag{font-size:.8rem;font-weight:700;color:var(--cherry)}
.pk .nm{font-family:var(--serif);font-size:1.12rem;line-height:1.2}
.pk .why{font-size:.96rem}
.pk .buyline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:6px}
.pk .buy{padding:8px 14px;font-size:.95rem}

/* full specs, folded */
details{border-top:1px solid var(--rule);padding-top:12px}
summary{cursor:pointer;font-weight:700}
.specs{margin-top:12px;display:flex;flex-direction:column}
.srow{display:grid;grid-template-columns:1fr;gap:2px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.sk{font-weight:700}
.sv .sm{color:var(--ink-2)}
.src{font-size:.75rem;margin-left:5px;white-space:nowrap;color:var(--ink-2)}
@media (min-width:720px){.srow{grid-template-columns:10rem repeat(var(--n),1fr);gap:14px}.sv .sm{display:none}}

/* questions */
.faq{display:flex;flex-direction:column;gap:18px}
.faq h3{font-size:1.08rem}

footer{border-top:1px solid var(--rule);background:var(--wash);font-size:.88rem;color:var(--ink-2)}
footer .col{padding-block:22px;display:flex;flex-direction:column;gap:8px}
@media (min-width:720px){h1{font-size:2.5rem}.verdict .answer{font-size:1.32rem}.pickrow{grid-template-columns:120px 1fr}.pickrow img{width:120px;height:120px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.srow[aria-hidden]{display:none}
@media (min-width:720px){.srow[aria-hidden]{display:grid;border-bottom:2px solid var(--ink)}}

.verdict a.buy{color:#1d1306}
.verdict .pickrow.second a.buy{color:var(--band-ink)}
/* cost bars in HTML so labels stay readable on phones */
.bars{display:flex;flex-direction:column;gap:14px}
.bar-row{display:flex;flex-direction:column;gap:4px}
.bar-label{font-size:.95rem}
.bar-row.pick .bar-label{font-weight:800}
.bar-track{display:flex;align-items:center;gap:10px}
.bar-fill{display:flex;height:22px;border-radius:2px;overflow:hidden;flex:0 0 auto}
.bar-fill .m{background:var(--ink)} .bar-fill .g{background:var(--crema)}
.bar-total{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
/* your first latte */
ol.steps{margin:6px 0 0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px}
ol.steps li::marker{font-family:var(--serif);color:var(--cherry)}
/* words you'll see */
.gloss{margin:0;display:grid;grid-template-columns:1fr;gap:4px 18px}
.gloss dt{font-weight:800;margin-top:8px}
.gloss dd{margin:0;color:var(--ink-2)}
@media (min-width:720px){.gloss{grid-template-columns:11rem 1fr}.gloss dt{margin-top:0}}
.pickrow.second img{background:#fff;border-radius:4px;padding:4px}
.vs td.edge{color:var(--good)}

.faq h3{text-wrap:pretty}
.chart svg{max-width:520px}