/* Learn articles (loaded only on them, after style.css). Charts are inline SVG drawn by site/charts.py: the SVG carries
   classes only, and every colour below is a site token, so a new palette reaches the charts by itself. The --ac-*
   names are the one place the article maps the tokens (all of them exist in tokens.css). */
.art-page{
  --ac-ink:var(--ink); --ac-body:var(--body); --ac-muted:var(--muted); --ac-line:var(--line);
  --ac-soft:var(--soft); --ac-card:var(--card); --ac-quiet:var(--stone);
  --ac-hot:var(--a1-b); --ac-edge:var(--a1-ink); --ac-hot-ink:var(--a1-ink); --ac-aid:var(--g-ink); --ac-on-hot:var(--on-a1);
}
.art-page main{max-width:760px}
.art-prose{max-width:660px}
.art-page .answer{max-width:660px}

/* on this page */
.art-toc{margin:0 0 4px}
.art-toc ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.art-toc a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--ac-line);border-radius:999px;background:var(--ac-card);color:var(--ac-body);font:500 14px/1 var(--sans);text-decoration:none}
.art-toc a:hover{border-color:var(--ac-hot);color:var(--ac-ink)}
.art-toc a:focus-visible{outline:2px solid var(--ac-hot-ink);outline-offset:2px}
.art-page h2.sec{scroll-margin-top:16px}

/* prose pieces */
.art-limit{margin:22px 0;padding:14px 18px;background:var(--ac-soft);border-left:4px solid var(--ac-hot);border-radius:0 var(--rb) var(--rb) 0;color:var(--ac-body)}
.art-limit b{color:var(--ac-ink)}
.art-formula{margin:18px 0;padding:14px 18px;text-align:center;font:600 19px/1.5 var(--display);color:var(--ac-muted);background:var(--ac-card);border:1px solid var(--ac-line);border-radius:var(--r)}
.art-formula span{color:var(--ac-ink)}
.art-sub{font:700 20px/1.3 var(--display);color:var(--ac-ink);margin:30px 0 10px}

/* a figure: title, one-line takeaway, key, chart, note, data table */
.chart-fig{margin:22px 0 44px;padding:24px 20px 14px;background:var(--ac-card);border:1px solid var(--ac-line);border-radius:var(--r);box-shadow:var(--shadow)}
.chart-kicker{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:700 11.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ac-hot-ink)}
.chart-tag{padding:1px 9px;border:1px solid var(--ac-line);border-radius:999px;background:var(--ac-soft);color:var(--ac-muted);letter-spacing:.04em;font-weight:600}
.chart-title{margin:0 0 6px;font:700 24px/1.25 var(--display);letter-spacing:-.01em;color:var(--ac-ink)}
.chart-take{margin:0 0 16px;max-width:640px;text-wrap:balance;font:500 17px/1.5 var(--sans);color:var(--ac-body)}
.chart-key{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 10px;padding:0;list-style:none;font:13px/1.4 var(--sans);color:var(--ac-muted)}
.chart-key li{display:flex;align-items:center;gap:6px}
.key-ic{flex:none;width:18px;height:18px}
.key-ic.key-type{width:24px;height:24px}
.c-ico{fill:none;stroke:var(--ac-ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.c-ico.c-ico-f{fill:var(--ac-ink);stroke:none}
.key-ic.key-bar{width:28px}
.chart-note{margin:12px 0 0;max-width:640px;font:13px/1.55 var(--sans);color:var(--ac-muted)}
.chart-data{margin:14px 0 0;padding-top:8px;border-top:1px solid var(--ac-line)}
.chart-data summary{display:flex;align-items:center;min-height:40px;font:600 14.5px/1.4 var(--sans);color:var(--ac-ink);cursor:pointer}
.chart-data summary:focus-visible{outline:2px solid var(--ac-hot-ink);outline-offset:2px;border-radius:var(--rb)}
.chart-data p,.chart-data ol{font:14.5px/1.55 var(--sans);color:var(--ac-body)}

/* the drawings: a wide one from 800 px, a narrow one below, so text keeps its size */
.chart-box{position:relative}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart-wide{max-width:720px}
.chart-narrow{display:none;max-width:440px;margin:0 auto}
@media (max-width:799px){.chart-wide{display:none}.chart-narrow{display:block}}
.chart text{font-family:var(--sans);fill:var(--ac-body)}
.c-axis{font-size:12px;fill:var(--ac-muted);font-variant-numeric:tabular-nums}
.chart text.c-axis-end{font-size:12px}
.c-grid{stroke:var(--ac-line);stroke-width:1}
.c-grid.c-zero{stroke:var(--ac-quiet)}
.c-guide{stroke:var(--ac-line);stroke-width:1;stroke-dasharray:1 5;stroke-linecap:round}
.c-guide,.c-grid{pointer-events:none}
.c-row-bg{fill:transparent}
.c-row:hover .c-row-bg,.c-row:focus-within .c-row-bg{fill:var(--ac-soft)}
.chart text.c-name{font-size:13px;fill:var(--ac-ink)}
/* Grinder names link to their review pages */
.chart .c-name-link{cursor:pointer}
.chart .c-name-link:hover text.c-name,.chart .c-name-link:focus-visible text.c-name{text-decoration:underline;fill:var(--ac-hot-ink)}
.chart .c-name-link:focus-visible{outline:2px solid var(--ac-ink);outline-offset:2px}
.chart text.c-val{font-size:13px;font-weight:600;fill:var(--ac-ink);font-variant-numeric:tabular-nums}
.chart text.c-src{font-size:12.5px;fill:var(--ac-muted)}
.c-link-out{cursor:pointer;text-decoration:none}
.c-link-out:hover text.c-src,.c-link-out:focus text.c-src{fill:var(--ac-hot-ink);text-decoration:underline}
.c-link-out:hover text.c-val,.c-link-out:focus text.c-val{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.c-link-out:focus-visible{outline:2px solid var(--ac-hot-ink);outline-offset:2px}

/* marks: circle = hand, diamond = electric, filled = no aid, open ring = measured with an aid */
.c-dot{fill:var(--ac-hot);stroke:var(--ac-edge);stroke-width:1.4}
.c-dot.c-hollow{fill:var(--ac-card);stroke:var(--ac-aid);stroke-width:2.2}
.c-bar{fill:var(--ac-hot);stroke:var(--ac-edge);stroke-width:1.2}
.c-bar.c-small{fill:var(--ac-muted);stroke:none}
.c-bar.c-hollow{fill:var(--ac-card);stroke:var(--ac-aid);stroke-width:2}
.c-bar.c-open{fill:none;stroke:var(--ac-edge);stroke-width:1.6;stroke-dasharray:3 2.5}
.c-bar.c-open.c-hollow{stroke:var(--ac-aid)}
.c-cap{stroke:var(--ac-edge);stroke-width:2;stroke-linecap:round}
.c-bar.c-hollow+.c-cap,.c-bar.c-hollow+.c-cap+.c-cap{stroke:var(--ac-aid)}
.c-link{stroke:var(--ac-quiet);stroke-width:2;stroke-linecap:round}
.c-other{fill:var(--ac-card);stroke:var(--ac-muted);stroke-width:1.6}
.c-break{stroke:var(--ac-muted);stroke-width:2;fill:none;stroke-linecap:round}
.c-dose{fill:var(--ac-soft);stroke:var(--ac-line);stroke-width:1}
.c-old{fill:var(--ac-hot);stroke:var(--ac-edge);stroke-width:1.2}
.c-old.c-aided{fill:var(--ac-aid);stroke:var(--ac-aid)}
.c-old-range{fill-opacity:.38;stroke:none}

/* hover and keyboard focus: a card above the row. Rows are drawn top to bottom, so the card lands over rows above it. */
.c-tip{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.c-tip{transition:opacity .12s ease}}
.c-row:hover .c-tip,.c-row:focus-within .c-tip{opacity:1;visibility:visible}
.c-tip-bg{fill:var(--ac-card);stroke:var(--ac-muted);stroke-width:1;filter:drop-shadow(0 8px 14px color-mix(in srgb,var(--ac-ink) 24%,transparent))}
.chart text.c-tip-t{font-size:12.5px;fill:var(--ac-body)}
.chart text.c-tip-h{font-size:13.5px;font-weight:700;fill:var(--ac-ink)}
.chart text.c-tip-v{fill:var(--ac-ink)}
.chart text.c-tip-m{fill:var(--ac-muted)}

/* chart 3: a diagram, drawn flat and quiet */
.diagram-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:start}
.diagram-box .chart{max-width:360px;margin:0 auto}
.diagram-grid .where-list p.cite{font-size:14px}
.d-body{fill:var(--ac-soft);stroke:var(--ac-muted);stroke-width:2;stroke-linejoin:round}
.d-cup{fill:var(--ac-card);stroke:var(--ac-muted);stroke-width:2;stroke-linejoin:round}
.d-bean{fill:var(--ac-quiet);stroke:var(--ac-muted);stroke-width:1.2}
.d-burr{fill:var(--ac-quiet);stroke:var(--ac-muted);stroke-width:1.5}
.d-crease{fill:none;stroke:var(--ac-muted);stroke-width:1.2;stroke-linecap:round}
.d-tooth{fill:none;stroke:var(--ac-muted);stroke-width:1.5;stroke-linejoin:round}
.d-shaft{fill:var(--ac-quiet);stroke:var(--ac-muted);stroke-width:1.5}
.d-grain{fill:var(--ac-edge)}
.d-leader{stroke:var(--ac-edge);stroke-width:1.6;stroke-dasharray:3 3}
.d-pin{fill:var(--ac-hot);stroke:var(--ac-edge);stroke-width:1.4}
.chart text.d-pin-n{fill:var(--ac-on-hot);font-size:14px;font-weight:700}
.chart text.d-label{fill:var(--ac-muted);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.where-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.where-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px}
.where-list .pin{display:grid;place-items:center;width:28px;height:28px;margin-top:2px;border-radius:50%;background:var(--ac-hot);color:var(--ac-on-hot);font:700 14px/1 var(--sans)}
.where-list h4{margin:0 0 2px;font:700 18px/1.3 var(--display);color:var(--ac-ink)}
.where-list p{margin:0 0 6px;font:15.5px/1.5 var(--sans)}
.where-list .cite,.cites li{font:14px/1.5 var(--sans);color:var(--ac-muted)}
.where-list .cite a,.cites a{color:var(--ac-body);text-decoration-color:var(--ac-quiet)}
.where-list small,.cites small{display:block;margin-top:2px;font-size:12.5px}

/* how to reduce it */
.aids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 10px}
.aid{padding:18px 20px;background:var(--ac-card);border:1px solid var(--ac-line);border-radius:var(--r)}
.aid h3{margin:0 0 6px;font:700 20px/1.3 var(--display);color:var(--ac-ink)}
.aid p{margin:0 0 10px;font-size:16px;line-height:1.55}
.aid .aid-lab{margin:12px 0 6px;font:700 11.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted)}
.aid .cites{padding-top:0;border-top:0}
.aid .cites.measured li{font-size:14.5px;color:var(--ac-body)}
.aid .cites.measured b{color:var(--ac-ink);font-variant-numeric:tabular-nums}
.aid-data{margin-bottom:8px}
.cites{margin:0;padding:10px 0 0;list-style:none;border-top:1px solid var(--ac-line)}
.cites li{margin:0 0 8px}
.art-table{width:100%;border-collapse:collapse;font:14px/1.45 var(--sans)}
.art-table thead th{padding:8px 10px;font:600 11.5px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);border-bottom:2px solid var(--ac-quiet);white-space:nowrap}
.art-table tbody th{padding:9px 10px;font:600 14px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ac-ink);text-align:left;border-bottom:1px solid var(--ac-line)}
.art-table td{padding:9px 10px;border-bottom:1px solid var(--ac-line);vertical-align:top;color:var(--ac-body)}
.art-table tbody th a{color:inherit;text-decoration-color:var(--ac-quiet)}
.art-table td .said,.art-table td.said{min-width:260px;color:var(--ac-muted)}
.art-table td.num{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:left}
.art-table small{color:var(--ac-muted)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.art-picks{grid-template-columns:repeat(3,minmax(0,1fr));margin:6px 0 10px}
.pick-where{margin:6px 0 0;font:12.5px/1.4 var(--sans);color:var(--ac-muted)}
.pick-fig{margin:0;font:15px/1.45 var(--sans);color:var(--ac-body)}
.pick-fig b{display:block;font:700 22px/1.2 var(--display);color:var(--ac-ink);font-variant-numeric:tabular-nums}
.pick-why{margin:0 0 10px;font:13.5px/1.5 var(--sans);color:var(--ac-muted)}

@media (max-width:799px){
  .diagram-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .aids{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .art-picks{grid-template-columns:minmax(0,1fr)}
}
/* phones: the figure bleeds to the screen edges so the narrow drawing keeps its 13 px text */
@media (max-width:600px){
  .chart-fig{margin-left:-16px;margin-right:-16px;padding:20px 0 12px;border-left:0;border-right:0;border-radius:0}
  .chart-fig>figcaption,.chart-fig>.chart-key,.chart-fig>.chart-note,.chart-fig>.chart-data,.chart-fig .where-list{padding-left:16px;padding-right:16px}
  .chart-title{font-size:21px}
  .chart-take{font-size:16px}
  .diagram-box{padding:0 16px}
  .art-table{font-size:13.5px}
}
@media print{.c-tip{display:none}}

/* Sources: folded at the end of the article; every chart value already links to its own source */
.art-srcs{margin:40px 0 0;padding-top:16px;border-top:1px solid var(--ac-line);font:14px/1.55 var(--sans);color:var(--ac-muted)}
.art-srcs summary{display:inline-flex;align-items:center;min-height:36px;cursor:pointer;font-weight:600;color:var(--ac-muted)}
.art-srcs summary:hover,.art-srcs[open] summary{color:var(--ac-ink)}