/* The conical vs flat burrs article (loaded only on it, after article.css). Drawings and charts are inline SVG built by
   site/burr_art.py, site/burr_explain.py and site/burr_charts.py: the SVG carries classes only, and every colour below is
   a site token, so a new palette reaches them by itself. The --ac-* names are set in article.css. */

/* ---- shape colours: conical is the site's orange, flat is slate ink ---- */
.art-page{
  --b-con:var(--a1-b); --b-con-edge:var(--a1-ink); --b-flat:var(--ink); --b-flat-edge:var(--ink);
  --coffee:var(--foot-bg); --coffee-hi:color-mix(in srgb,var(--foot-bg) 55%,var(--foot-rule)); --ground:var(--foot-rule);
}

/* ---- metal tones, dark to bright, for the cut-away drawing ---- */
.hero-svg{
  --t0:var(--body); --t1:var(--muted); --t2:color-mix(in srgb,var(--muted) 55%,var(--stone)); --t3:var(--stone);
  --t4:color-mix(in srgb,var(--stone) 55%,var(--soft)); --t5:var(--soft); --t6:var(--card);
}
.hero-svg .t0{fill:var(--t0);stroke:var(--t0)}
.hero-svg .t1{fill:var(--t1);stroke:var(--t1)}
.hero-svg .t2{fill:var(--t2);stroke:var(--t2)}
.hero-svg .t3{fill:var(--t3);stroke:var(--t3)}
.hero-svg .t4{fill:var(--t4);stroke:var(--t4)}
.hero-svg .t5{fill:var(--t5);stroke:var(--t5)}
.hero-svg .t6{fill:var(--t6);stroke:var(--t6)}
.hero-svg [class^="t"]{stroke-width:.5;stroke-linejoin:round}
.hero-svg .void{fill:color-mix(in srgb,var(--ink) 78%,var(--body))}
.hero-svg .ol{fill:none;stroke:color-mix(in srgb,var(--ink) 62%,transparent);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
.hero-svg .cut{fill:var(--a1-tint);stroke:color-mix(in srgb,var(--ink) 62%,transparent);stroke-width:1.1;stroke-linejoin:round}
.hero-svg .hatch{fill:none;stroke:color-mix(in srgb,var(--a1-ink) 38%,transparent);stroke-width:1;stroke-dasharray:2.2 3.4}
.hero-svg .h-shadow{fill:color-mix(in srgb,var(--a1-ink) 22%,transparent)}
.hero-svg .plate{fill:color-mix(in srgb,var(--a1-line) 55%,var(--card));stroke:none}
.hero-svg .plate-side{fill:color-mix(in srgb,var(--a1-2) 55%,var(--stone));stroke:none}
.bean{fill:var(--coffee);stroke:color-mix(in srgb,var(--ink) 60%,transparent);stroke-width:.8}
.bean-hi{fill:var(--coffee-hi);opacity:.7}
.bean-crease{fill:none;stroke:var(--stone);stroke-width:1.1;stroke-linecap:round;opacity:.85}
.grain{fill:var(--ground)}
.hero-svg .flow{fill:none;stroke:var(--a1-b);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.1 6.5}
.hero-svg .flow-head{fill:var(--a1-b)}

/* ---- the hero: two cut-away sets side by side on a warm card ---- */
.hero-fig{margin:22px 0 26px;padding:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--a1-line);
  background:linear-gradient(180deg,var(--hero-bg) 0%,var(--hero-bg-2) 100%);box-shadow:var(--shadow)}
.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-cell{position:relative;padding:14px 10px 4px}
.hero-cell+.hero-cell{border-left:1px solid var(--a1-line)}
.hero-svg{display:block;width:100%;height:auto;max-width:360px;margin:0 auto}
.hero-cap{padding:0 16px 18px;text-align:center}
.hero-cap p.hero-name{margin:0 0 4px;font:700 22px/1.2 var(--display);color:var(--on-hero);letter-spacing:var(--track-hero)}
.hero-cap p{margin:0;font:15px/1.45 var(--sans);color:var(--hero-body)}
.hero-cap .hero-name b{color:var(--hero-accent)}

/* ---- what each burr is: two cards ---- */
.burr-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 24px}
.burr-card{padding:18px 20px 16px;background:var(--ac-card);border:1px solid var(--ac-line);border-top:4px solid var(--b-con);border-radius:var(--r)}
.burr-card-flat{border-top-color:var(--b-flat)}
.burr-card-ic .key-ic{width:64px;height:64px}
.burr-card h3{margin:6px 0 2px;font:700 22px/1.25 var(--display);color:var(--ac-ink)}
.burr-card-lead{margin:0 0 8px;font:600 16.5px/1.4 var(--sans);color:var(--ac-ink)}
.burr-card ul{margin:0 0 8px}
.burr-card li{font:15.5px/1.5 var(--sans)}
.burr-card-more{font:600 14.5px/1.4 var(--sans);color:var(--ac-hot-ink)}
.c-ico.c-ico-f.c-ico-conical{fill:var(--b-con-edge)}
.c-ico.c-ico-f.c-ico-flat{fill:var(--b-flat)}

/* ---- the animated cross-sections ---- */
.explain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.explain-cell h4{margin:0 0 4px;text-align:center;font:700 19px/1.3 var(--display);color:var(--ac-ink)}
.explain-svg{display:block;width:100%;height:auto;max-width:360px;margin:0 auto}
.explain-svg text{font-family:var(--sans)}
.ex-hatch{stroke:var(--ac-muted);stroke-width:1.2;opacity:.5}
.ex-hatch.ex-hatch-t{stroke:var(--ac-hot);opacity:.55}
.ex-over{stroke:none}
.ex-gap{fill:color-mix(in srgb,var(--a1-b) 18%,transparent);stroke:none;animation:ex-glow 3.5s ease-in-out infinite}
.ex-sh-a{stop-color:var(--ac-card);stop-opacity:.75}
.ex-sh-b{stop-color:var(--ac-card);stop-opacity:0}
.ex-hp-a{stop-color:var(--ac-soft)}
.ex-hp-b{stop-color:var(--ac-card)}
.ex-hopper-fill{stroke:none}
@keyframes ex-glow{0%,100%{opacity:.55}50%{opacity:1}}
.ex-hopper{fill:none;stroke:var(--ac-muted);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ex-cup{fill:var(--ac-card);stroke:var(--ac-muted);stroke-width:2.5;stroke-linejoin:round}
.ex-heap{fill:var(--ground)}
.ex-fixed{fill:var(--ac-quiet);stroke:var(--ac-muted);stroke-width:1.6;stroke-linejoin:round}
.ex-tooth{fill:none;stroke:var(--ac-muted);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.ex-tooth.ex-tooth-fill{fill:var(--ac-quiet)}
.ex-turn-fill{fill:var(--a1-tint)}
.ex-turn-edge{fill:none;stroke:var(--ac-edge);stroke-width:2;stroke-linejoin:round}
.ex-turn-fill.ex-turn-edge{fill:var(--a1-tint)}
.ex-flutes line{stroke:var(--ac-hot);stroke-width:1.7;opacity:.75}
.ex-tooth.ex-teeth{fill:var(--a1-tint);stroke:var(--ac-edge);stroke-width:1.6}
.ex-shaft{fill:var(--ac-quiet);stroke:var(--ac-muted);stroke-width:1.6}
.ex-chute{fill:none;stroke:var(--ac-muted);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ex-orbit{fill:none;stroke:var(--ac-hot);stroke-width:2.2;stroke-linecap:round}
.ex-orbit-head{fill:var(--ac-hot)}
.ex-lead{stroke:var(--ac-edge);stroke-width:1.5;stroke-dasharray:3 3}
.ex-pin{fill:var(--ac-hot);stroke:var(--ac-edge);stroke-width:1.4}
.explain-svg text.ex-pin-n{fill:var(--ac-on-hot);font-size:14px;font-weight:700}
.explain-svg text.ex-tag{fill:var(--ac-muted);font-size:12px;font-weight:600;letter-spacing:.04em}
.explain-svg text.ex-tag-turn{fill:var(--ac-hot-ink)}
.ex-grain{fill:var(--ground)}
.ex-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:16px 0 0;padding:0;list-style:none}
.ex-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font:15.5px/1.5 var(--sans);color:var(--ac-body)}
.ex-steps .pin{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--a1);color:var(--on-a1);font:700 14px/1 var(--sans)}
.explain-ctl{margin:12px 0 0}
.explain-toggle{min-height:40px;padding:0 16px;border:1px solid var(--ac-line);border-radius:999px;background:var(--ac-card);color:var(--ac-ink);font:600 14px/1 var(--sans);cursor:pointer}
.explain-toggle:hover{border-color:var(--ac-hot)}
.explain-toggle:focus-visible{outline:2px solid var(--ac-hot-ink);outline-offset:2px}
.explain-toggle[hidden]{display:none}

/* the motion: a bean falls, is cut, and leaves as grounds. The still frame (beans in the hopper, grounds in the cup) is the drawing itself. */
.explain-svg .ex-bean{animation:ex-c-l 7s linear infinite}
.ex-conical .eb1{animation-name:ex-c-l;animation-delay:-3.5s}
.ex-conical .eb2{animation-name:ex-c-r;animation-delay:-1.75s}
.ex-conical .eb3{animation-name:ex-c-lh;animation-delay:-5.25s}
.ex-conical .eb4{animation-name:ex-c-rh;animation-delay:0s}
.ex-flat .eb1{animation-name:ex-f-l;animation-delay:-3.5s}
.ex-flat .eb2{animation-name:ex-f-r;animation-delay:-1.75s}
.ex-flat .eb3{animation-name:ex-f-lh;animation-delay:-5.25s}
.ex-flat .eb4{animation-name:ex-f-rh;animation-delay:0s}
.ex-conical .ex-grain{animation:ex-c-fall 7s linear infinite}
.ex-flat .ex-grain.eg1,.ex-flat .ex-grain.eg2,.ex-flat .ex-grain.eg3{animation:ex-f-gl 7s linear infinite}
.ex-flat .ex-grain.eg4,.ex-flat .ex-grain.eg5,.ex-flat .ex-grain.eg6{animation:ex-f-gr 7s linear infinite}
.ex-grain.eg1{animation-delay:0s}.ex-grain.eg4{animation-delay:-1.2s}.ex-grain.eg2{animation-delay:-2.3s}
.ex-grain.eg5{animation-delay:-3.5s}.ex-grain.eg3{animation-delay:-4.7s}.ex-grain.eg6{animation-delay:-5.9s}
.ex-flutes{animation:ex-flute 1.8s linear infinite}
.ex-teeth{animation:ex-slide 1.4s linear infinite}
.ex-orbit{stroke-dasharray:7 9;animation:ex-orbit 1.1s linear infinite}
@keyframes ex-c-l{0%{transform:translate(0,0) scale(1);opacity:0}6%{opacity:1}34%{transform:translate(-6px,36px) scale(1)}66%{transform:translate(-10px,118px) scale(.85)}86%{transform:translate(-13px,193px) scale(.5);opacity:1}100%{transform:translate(-13px,200px) scale(.3);opacity:0}}
@keyframes ex-c-r{0%{transform:translate(0,0) scale(1);opacity:0}6%{opacity:1}34%{transform:translate(6px,34px) scale(1)}66%{transform:translate(10px,116px) scale(.85)}86%{transform:translate(13px,191px) scale(.5);opacity:1}100%{transform:translate(13px,198px) scale(.3);opacity:0}}
@keyframes ex-c-lh{0%{transform:translate(0,0) scale(1);opacity:0}6%{opacity:1}34%{transform:translate(0,70px) scale(1)}66%{transform:translate(-6px,152px) scale(.85)}86%{transform:translate(-9px,227px) scale(.5);opacity:1}100%{transform:translate(-9px,234px) scale(.3);opacity:0}}
@keyframes ex-c-rh{0%{transform:translate(0,0) scale(1);opacity:0}6%{opacity:1}34%{transform:translate(0,68px) scale(1)}66%{transform:translate(6px,150px) scale(.85)}86%{transform:translate(9px,225px) scale(.5);opacity:1}100%{transform:translate(9px,232px) scale(.3);opacity:0}}
@keyframes ex-c-fall{0%{transform:translate(0,0);opacity:0}6%{opacity:1}74%{transform:translate(0,100px);opacity:1}86%{transform:translate(0,100px);opacity:0}100%{transform:translate(0,100px);opacity:0}}
@keyframes ex-f-l{0%{transform:translate(0,0) scale(1);opacity:0}6%{opacity:1}32%{transform:translate(-4px,116px) scale(1)}46%{transform:translate(-22px,144px) scale(.9)}70%{transform:translate(-70px,144px) scale(.75)}88%{transform:translate(-106px,144px) scale(.5);opacity:1}100%{transform:translate(-112px,144px) scale(.3);opacity:0}}
@keyframes ex-f-r{0%{transform:translate(0,0) scale(1);opacity:0}6%{opacity:1}32%{transform:translate(4px,114px) scale(1)}46%{transform:translate(22px,142px) scale(.9)}70%{transform:translate(70px,142px) scale(.75)}88%{transform:translate(106px,142px) scale(.5);opacity:1}100%{transform:translate(112px,142px) scale(.3);opacity:0}}
@keyframes ex-f-lh{0%{transform:translate(0,0) scale(1);opacity:0}6%{opacity:1}32%{transform:translate(-2px,140px) scale(1)}46%{transform:translate(-20px,168px) scale(.9)}70%{transform:translate(-68px,168px) scale(.75)}88%{transform:translate(-104px,168px) scale(.5);opacity:1}100%{transform:translate(-110px,168px) scale(.3);opacity:0}}
@keyframes ex-f-rh{0%{transform:translate(0,0) scale(1);opacity:0}6%{opacity:1}32%{transform:translate(2px,138px) scale(1)}46%{transform:translate(20px,166px) scale(.9)}70%{transform:translate(68px,166px) scale(.75)}88%{transform:translate(104px,166px) scale(.5);opacity:1}100%{transform:translate(110px,166px) scale(.3);opacity:0}}
@keyframes ex-f-gl{0%{transform:translate(0,0);opacity:0}6%{transform:translate(-8px,10px);opacity:1}40%{transform:translate(-8px,98px)}68%{transform:translate(36px,134px)}84%{transform:translate(46px,170px);opacity:1}94%{transform:translate(46px,176px);opacity:0}100%{opacity:0}}
@keyframes ex-f-gr{0%{transform:translate(0,0);opacity:0}6%{transform:translate(8px,10px);opacity:1}40%{transform:translate(8px,98px)}68%{transform:translate(-36px,134px)}84%{transform:translate(-46px,170px);opacity:1}94%{transform:translate(-46px,176px);opacity:0}100%{opacity:0}}
@keyframes ex-flute{to{transform:translateY(16px)}}
@keyframes ex-slide{to{transform:translateX(14px)}}
@keyframes ex-orbit{to{stroke-dashoffset:-32}}
.explain.is-paused .explain-svg *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .explain-svg *{animation:none!important}
  .explain-svg .ex-grain{opacity:0}
  .explain-toggle{display:none!important}
}

/* ---- particle sizes ---- */
.part-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.particle-svg,.curve-svg{display:block;width:100%;height:auto;max-width:400px;margin:0 auto}
.p-bed{fill:var(--ac-soft);stroke:var(--ac-line);stroke-width:1.5}
.p-fine{fill:var(--ac-hot);stroke:var(--ac-edge);stroke-width:.7}
.p-target{fill:var(--coffee-hi);stroke:var(--coffee);stroke-width:1}
.p-boulder{fill:color-mix(in srgb,var(--ink) 70%,var(--muted));stroke:var(--ink);stroke-width:1.2}
.p-scale line{stroke:var(--ac-ink);stroke-width:2;stroke-linecap:round}
.particle-svg text.p-scale-t{font-size:13px;font-weight:600;fill:var(--ac-ink)}
.part-key{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;font:14.5px/1.45 var(--sans);color:var(--ac-body)}
.part-key li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start}
.part-sw{display:block;margin-top:3px;width:16px;height:16px;border-radius:50%}
.part-sw-fine{width:10px;height:10px;margin:6px 3px;background:var(--ac-hot)}
.part-sw-target{background:var(--coffee-hi);border:1px solid var(--coffee)}
.part-sw-boulder{background:color-mix(in srgb,var(--ink) 70%,var(--muted))}
.part-sketch{margin:8px 0 0;font:14px/1.5 var(--sans);color:var(--ac-muted)}
.cv-axis{stroke:var(--ac-quiet);stroke-width:1.5}
.cv-line{fill:none;stroke-width:2.6;stroke-linejoin:round}
.cv-line.cv-flat{stroke:var(--b-flat)}
.cv-line.cv-conical{stroke:var(--b-con)}
.cv-fill{stroke:none}
.cv-fill.cv-flat{fill:color-mix(in srgb,var(--b-flat) 14%,transparent)}
.cv-fill.cv-conical{fill:color-mix(in srgb,var(--b-con) 18%,transparent)}
.curve-svg text{font-family:var(--sans)}
.curve-svg text.cv-label{font-size:13.5px;font-weight:700;fill:var(--ac-ink)}
.curve-svg text.cv-end{font-size:12px;fill:var(--ac-muted)}

/* ---- the charts: lanes of dots, bands, bars ---- */
.chart text.c-lane{font-size:14px;font-weight:700;fill:var(--ac-ink)}
.chart text.c-lane-sub,.chart tspan.c-lane-sub{font-size:12px;font-weight:400;fill:var(--ac-muted)}
.c-lane-bg{fill:color-mix(in srgb,var(--ac-soft) 60%,transparent)}
.c-pdot{stroke-width:1.4}
.c-pdot.c-shape-conical{fill:var(--b-con);stroke:var(--b-con-edge)}
.c-pdot.c-shape-flat{fill:var(--b-flat);stroke:var(--b-flat-edge)}
.c-pdot.c-hollow{fill:var(--ac-card);stroke-width:2.4}
.c-pt:hover .c-pdot,.c-pt:focus-within .c-pdot{stroke-width:3}
.c-whisk{stroke:var(--ac-muted);stroke-width:1.8;stroke-linecap:round}
.c-whisk.c-whisk-open{stroke-dasharray:2 3}
.c-median{stroke:var(--ac-ink);stroke-width:2;stroke-linecap:round}
.chart text.c-med-t{font-size:11.5px;font-weight:600;fill:var(--ac-ink);font-variant-numeric:tabular-nums}
.chart text.c-over{font-size:12px;font-weight:600;fill:var(--ac-ink);font-variant-numeric:tabular-nums}
.c-nband.c-nl2{fill:var(--g-tint)}
.c-nband.c-nl3{fill:var(--ac-soft)}
.c-nband.c-nl4{fill:var(--a2-tint)}
.c-nband.c-nl5{fill:var(--a1-tint)}
.chart text.c-nword{font-size:12px;font-weight:600;fill:var(--ac-muted);letter-spacing:.04em}
.c-seg-r{stroke:var(--ac-card);stroke-width:2}
.c-band-0 .c-seg-r,.band-sw-0{fill:var(--a1-line);background:var(--a1-line)}
.c-band-1 .c-seg-r,.band-sw-1{fill:var(--a1-2);background:var(--a1-2)}
.c-band-2 .c-seg-r,.band-sw-2{fill:var(--a1);background:var(--a1)}
.c-band-3 .c-seg-r,.band-sw-3{fill:var(--foot-bg);background:var(--foot-bg)}
.chart text.c-seg-t{font-size:13px;font-weight:700;fill:var(--ac-ink)}
.c-band-2 text.c-seg-t{fill:var(--on-a1)}
.c-band-3 text.c-seg-t{fill:var(--on-foot)}
.c-seg:hover .c-seg-r{stroke:var(--ac-ink)}
.chart text.c-rowname{font-size:13px;fill:var(--ac-body)}
.c-track{fill:var(--ac-soft);stroke:var(--ac-line)}
.c-fill{stroke:none}
.c-fill-conical{fill:var(--b-con)}
.c-fill-flat{fill:var(--b-flat)}
.chart-key-bands .band-sw{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid var(--ac-line)}
.chart text.c-val{font-size:13px}
.src-date{color:var(--ac-muted);font-size:12.5px}

/* ---- the cup: reviewer lines ---- */
.cup-cites{margin:6px 0 14px}
.cup-cites li{margin:0 0 10px;font:15px/1.5 var(--sans);color:var(--ac-body)}
.cup-cites .cup-burr{color:var(--ac-muted)}
.cup-cites small{display:block;margin-top:2px;color:var(--ac-muted);font-size:12.5px}
q{quotes:"\201C" "\201D"}

/* ---- picks by budget ---- */
.bpicks{display:grid;gap:22px;margin:8px 0 12px}
.bpick-band{margin:0 0 8px;font:700 20px/1.3 var(--display);color:var(--ac-ink)}
.bpick-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bpick{border-top:4px solid var(--b-con)}
.bpick-flat{border-top-color:var(--b-flat)}
.bpick .ptag{color:var(--ac-hot-ink)}
.bpick-flat .ptag{color:var(--ac-ink)}
.bpick .pick-fig{margin:0;font:15px/1.45 var(--sans);color:var(--ac-body)}
.bpick .pick-fig b{display:block;font:700 22px/1.2 var(--display);color:var(--ac-ink);font-variant-numeric:tabular-nums}
.bpick .pick-why{margin:0 0 4px}
.bpick .pick-why small{display:block;margin-top:2px;font-size:12.5px}
.bpick .pick-fit{margin:0 0 8px;font:13.5px/1.45 var(--sans);color:var(--ac-muted)}
.bpick-none{margin:6px 0 0;font:15px/1.5 var(--sans);color:var(--ac-muted)}

/* ---- phones ---- */
@media (max-width:799px){
  .explain-grid{grid-template-columns:minmax(0,1fr)}
  .part-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .burr-cards,.bpick-cells,.ex-steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .hero-fig{margin-left:-16px;margin-right:-16px;border-radius:0;border-left:0;border-right:0}
  .hero-cell{padding:10px 4px 2px}
  .hero-cap{padding:0 10px 14px}
  .hero-cap p.hero-name{font-size:18px}
  .hero-cap p{font-size:13.5px}
  .chart-fig .explain-grid,.chart-fig .part-grid,.chart-fig>.ex-steps,.chart-fig>.explain-ctl{padding-left:16px;padding-right:16px}
}