.slate__stone{clip-path:polygon(0.00% 0.26%,2.08% 0.63%,4.17% 0.24%,6.25% 2.29%,8.33% 0.19%,10.42% 0.37%,12.50% 0.04%,14.58% 0.11%,16.67% 0.07%,18.75% 0.23%,20.83% 0.13%,22.92% 0.45%,25.00% 1.15%,27.08% 0.09%,29.17% 0.26%,31.25% 0.13%,33.33% 2.56%,35.42% 0.11%,37.50% 0.15%,39.58% 2.01%,41.67% 0.16%,43.75% 2.41%,45.83% 2.30%,47.92% 0.11%,50.00% 0.19%,52.08% 0.31%,54.17% 0.58%,56.25% 0.04%,58.33% 1.07%,60.42% 0.30%,62.50% 0.15%,64.58% 0.23%,66.67% 0.39%,68.75% 0.21%,70.83% 0.62%,72.92% 0.06%,75.00% 1.99%,77.08% 0.45%,79.17% 0.40%,81.25% 0.30%,83.33% 0.01%,85.42% 0.17%,87.50% 1.02%,89.58% 0.35%,91.67% 2.49%,93.75% 0.94%,95.83% 0.21%,97.92% 2.58%,100.00% 0.41%,99.94% 11.11%,99.44% 22.22%,99.97% 33.33%,99.89% 44.44%,99.91% 55.56%,99.89% 66.67%,99.42% 77.78%,99.97% 88.89%,100.00% 99.95%,97.92% 99.61%,95.83% 99.93%,93.75% 99.98%,91.67% 98.73%,89.58% 99.08%,87.50% 99.23%,85.42% 99.94%,83.33% 100.00%,81.25% 99.96%,79.17% 99.95%,77.08% 99.81%,75.00% 98.03%,72.92% 99.65%,70.83% 99.56%,68.75% 99.70%,66.67% 99.07%,64.58% 97.71%,62.50% 99.82%,60.42% 99.21%,58.33% 98.44%,56.25% 99.82%,54.17% 99.58%,52.08% 99.80%,50.00% 97.66%,47.92% 99.77%,45.83% 99.68%,43.75% 99.55%,41.67% 99.81%,39.58% 99.67%,37.50% 99.57%,35.42% 99.54%,33.33% 99.61%,31.25% 99.96%,29.17% 99.74%,27.08% 99.82%,25.00% 99.63%,22.92% 99.79%,20.83% 99.66%,18.75% 99.04%,16.67% 99.54%,14.58% 99.93%,12.50% 99.92%,10.42% 98.63%,8.33% 99.99%,6.25% 99.76%,4.17% 98.99%,2.08% 98.29%,0.00% 98.08%,0.11% 88.89%,0.05% 77.78%,0.02% 66.67%,0.05% 55.56%,0.07% 44.44%,0.11% 33.33%,0.03% 22.22%,0.06% 11.11%)}
.slate{width:100%;filter:drop-shadow(0 26px 30px rgba(30,20,10,.38)) drop-shadow(0 6px 8px rgba(30,20,10,.25))}
/* Long, narrow plank; the pieces are bite-sized, about a third of the slate's depth, with slate showing all round
   (like HCC's real tasting slates). The plank grows with the number of pours so the spacing stays the same. */
.slate__stone{display:grid;grid-template-columns:repeat(var(--n),1fr);align-items:center;gap:0;
  aspect-ratio:calc(var(--n) * 1.35 + .8) / 1;padding:0 clamp(18px,4vw,56px);
  background-color:#2c2e30;
  background-image:
    radial-gradient(120% 90% at 25% 15%,rgba(255,255,255,.075),transparent 55%),
    radial-gradient(90% 120% at 85% 95%,rgba(0,0,0,.4),transparent 60%),
    repeating-linear-gradient(177deg,rgba(255,255,255,.012) 0 1px,transparent 1px 13px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.slate__piece{display:flex;justify-content:center}
.slate__piece img{width:max(34px,31%);max-width:110px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 9px 7px rgba(0,0,0,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.slate__empty{display:block;width:max(34px,31%);aspect-ratio:1;border:1px dashed rgba(255,255,255,.28);border-radius:4px}
.slate__nums{display:grid;grid-template-columns:repeat(var(--n),1fr);padding:14px clamp(18px,4vw,56px) 0;filter:none}
.slate__nums span{text-align:center;font:italic 400 clamp(15px,1.8vw,20px)/1 var(--serif);color:var(--muted,#8B7355);letter-spacing:.06em}
.slate--sm .slate__stone{padding:0 14px}
.slate--sm .slate__piece img,.slate--sm .slate__empty{width:max(28px,34%)}
.slate--sm .slate__nums{padding:8px 16px 0}
.slate--sm .slate__nums span{font-size:13px}