/* Verified Coffee Data — design plan (10-12 rework, from the warm-exemplar research in research_notes/AI looking web design tells)
   Layout: one reading column (~42rem) on warm paper. The answer sits first in a light panel; everything below is
   separated by space and hairline rules, not boxes. Phone first. Plain menu in the reader's words.
   Color: warm near-black ink on warm off-white, ONE accent (dark roast red) for links and buttons. Buttons are our
   color, never Amazon's orange, so a buy row never looks like Amazon's own buy box.
   Type: Source Serif 4 carries the reading (body and headings, 19px / 1.6); Libre Franklin only for data, prices,
   tables, labels and the menu. No eyebrows, no glows, no textures, no numbering. */
:root{
  --paper:#fbf8f3;
  --ink:#1f1a16;
  --ink-2:#5a524b;
  --rule:#e4dbd0;
  --wash:#f3ede4;
  --card:#ffffff;
  --accent:#8c2b1f;        /* the one accent: links, buttons, our-pick marks */
  --accent-hover:#6f2117;
  --tan:#c4a27c;           /* second data color in charts only */
  --good:#2f6b3a;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.col{max-width:42rem;margin:0 auto;padding-inline:16px}
.num{font-variant-numeric:tabular-nums}

/* top bar: the name, then a plain menu */
.bar{border-bottom:1px solid var(--rule);background:var(--paper)}
.bar .col{padding-block:12px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px}
.bar a.home{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none}
.bar nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--sans);font-size:.86rem}
.bar nav a{color:var(--ink-2);text-decoration:none}
.bar nav a:hover{color:var(--accent);text-decoration:underline}

h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.18;text-wrap:balance;margin:0;letter-spacing:-.005em}
h1{font-size:2.05rem;letter-spacing:-.015em}
h2{font-size:1.5rem}
h3{font-size:1.15rem}
p{margin:0}
.sub{color:var(--ink-2)}
.small{font-family:var(--sans);font-size:.84rem;line-height:1.5;color:var(--ink-2)}
.byline{font-family:var(--sans);font-size:.86rem;color:var(--ink-2)}

/* the answer panel: first thing on the page */
.verdict{background:var(--wash);border-bottom:1px solid var(--rule)}
.verdict .col{padding-block:26px 24px;display:flex;flex-direction:column;gap:16px}
.verdict .answer{font-size:1.18rem;line-height:1.5}
.pickrow{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:14px}
.pickrow img{width:96px;height:96px;object-fit:contain}
.pickrow .tag{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ink-2)}
.pickrow .nm{font-family:var(--serif);font-weight:700;font-size:1.15rem;line-height:1.2}
.pickrow p.small{color:var(--ink-2)!important;opacity:1!important}
.pickrow .buyline{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pickrow.second{background:var(--card)}
a.pic{display:block;border-radius:3px}
a.pic:focus-visible{outline-offset:4px}

.buy{display:inline-block;background:var(--accent);color:#fff;font-family:var(--sans);font-weight:600;font-size:.95rem;text-decoration:none;padding:10px 16px;border-radius:3px;white-space:nowrap;border:2px solid var(--accent)}
.buy:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.buy.quiet{background:transparent;color:var(--accent)}
.buy.quiet:hover{background:var(--accent);color:#fff}
.price{font-family:var(--sans);font-size:.84rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.price b{font-size:1.05rem;color:var(--ink);font-weight:700}
.disclose{font-family:var(--sans);font-size:.8rem;color:var(--ink-2)}

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}

/* comparison and data tables: sans, tabular figures */
.vs{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.92rem;line-height:1.45;font-variant-numeric:tabular-nums}
.vs th,.vs td{padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top;text-align:left}
.vs thead th{font-weight:700;border-bottom:2px solid var(--ink)}
.vs tbody th{font-weight:600;width:30%}
.vs td.edge{color:var(--good);font-weight:600}
.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:.74rem;font-weight:600;color:var(--accent);border:1px solid var(--accent);padding:1px 6px;border-radius:3px}
@media (min-width:720px){.who{grid-template-columns:1fr 1fr;gap:28px}}

/* figures: listing photos and our own charts, each with a credit */
figure{margin:0;display:flex;flex-direction:column;gap:6px}
figcaption{font-family:var(--sans);font-size:.82rem;color:var(--ink-2)}
figcaption .credit{display:block;font-size:.76rem;opacity:.85}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:var(--card)}
.chart{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:14px}
.chart svg{width:100%;height:auto;display:block;max-width:520px}

/* quotes */
blockquote{margin:0;padding:0 0 0 16px;border-left:3px solid var(--accent)}
blockquote p{font-style:italic}
blockquote cite{display:block;font-style:normal;font-family:var(--sans);font-size:.82rem;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(--ink-2)}

/* product lists */
.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;background:var(--card);border-radius:3px}
.pk .tag{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ink-2)}
.pk .nm{font-weight:700;font-size:1.12rem;line-height:1.2}
.pk .why{font-size:1rem}
.pk .buyline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:6px}
.pk .buy{padding:7px 13px;font-size:.88rem}

/* full specs, folded */
details{border-top:1px solid var(--rule);padding-top:12px}
summary{cursor:pointer;font-family:var(--sans);font-weight:600;font-size:.95rem}
.specs{margin-top:12px;display:flex;flex-direction:column;font-family:var(--sans)}
.srow{display:grid;grid-template-columns:1fr;gap:2px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:.9rem;line-height:1.45}
.sk{font-weight:600}
.sv .sm{color:var(--ink-2)}
.src{font-family:var(--sans);font-size:.74rem;margin-left:5px;white-space:nowrap;color:var(--ink-2);text-decoration-style:dotted}
.meta{color:var(--ink-2);font-style:italic}
@media (min-width:720px){.srow{grid-template-columns:10rem repeat(var(--n),1fr);gap:14px}.sv .sm{display:none}}
.srow[aria-hidden]{display:none}
@media (min-width:720px){.srow[aria-hidden]{display:grid;border-bottom:2px solid var(--ink)}}

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

footer{border-top:1px solid var(--rule);background:var(--wash);font-family:var(--sans);font-size:.84rem;line-height:1.5;color:var(--ink-2)}
footer .col{padding-block:22px;display:flex;flex-direction:column;gap:8px}
@media (min-width:720px){h1{font-size:2.55rem}.verdict .answer{font-size:1.28rem}.pickrow{grid-template-columns:120px 1fr}.pickrow img{width:120px;height:120px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* cost bars in HTML so labels stay readable on phones */
.bars{display:flex;flex-direction:column;gap:14px;font-family:var(--sans)}
.bar-row{display:flex;flex-direction:column;gap:4px}
.bar-label{font-size:.9rem}
.bar-row.pick .bar-label{font-weight:700}
.bar-track{display:flex;align-items:center;gap:10px}
.bar-fill{display:flex;height:20px;border-radius:2px;overflow:hidden;flex:0 0 auto}
.bar-fill .m{background:var(--ink)} .bar-fill .g{background:var(--tan)}
.bar-total{font-weight:700;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(--sans);font-weight:600;color:var(--ink-2)}
/* words you'll see */
.gloss{margin:0;display:grid;grid-template-columns:1fr;gap:4px 18px}
.gloss dt{font-weight:700;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}}
/* first-week page: lazy YouTube embeds and the fix table */
.video{margin:0}
.video .frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fixes th{width:28%}
@media (max-width:719px){.fixes thead{display:none}.fixes tr{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
.vs.fixes tbody th,.vs.fixes td{display:block;width:auto;border:0;padding:3px 0}.fixes th{font-size:1rem}
.fixes td::before{content:attr(data-l);display:block;font-size:.76rem;font-weight:600;color:var(--ink-2)}}