/* ============================================================
   BERUNDA — The Tasting Chart
   A cue under "Slide to Select Your Roast", and the engraved plate
   it opens: four attribute rows × five roasts, each column headed by
   the same bean disc that rides the stream. Neutral — it never
   follows the slider's selection; it is the whole spectrum, always.
   ============================================================ */

/* ---- the cue ---- */
.ri-cue-row{display:flex;justify-content:center;margin-top:16px}
.ri-cue{position:relative;display:inline-flex;align-items:center;gap:9px;border:0;background:none;padding:3px 2px;cursor:pointer;color:var(--espresso-900);-webkit-tap-highlight-color:transparent}
/* the label carries an underline, so the hit area grows via a pseudo rather
   than padding, which would drag the rule away from the text */
.ri-cue::before{content:"";position:absolute;inset:-11px -8px}
.ri-cue-t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:11px;padding-left:.22em;text-decoration:underline;text-decoration-color:rgba(147,98,18,.55);text-decoration-thickness:1px;text-underline-offset:5px;transition:color .35s var(--ease-standard),text-decoration-color .35s var(--ease-standard)}
.ri-cue-mark{position:relative;width:17px;height:17px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(147,98,18,.7);transition:box-shadow .35s var(--ease-standard),background .35s var(--ease-standard)}
/* the "i" is drawn, not set — a dot and a stem, so it stays legible at 17px */
.ri-cue-mark::before,.ri-cue-mark::after{content:"";position:absolute;left:50%;transform:translateX(-50%);background:var(--gold-700);transition:background .35s var(--ease-standard)}
.ri-cue-mark::before{top:4px;width:2px;height:2px;border-radius:50%}
.ri-cue-mark::after{top:8px;width:1px;height:5px}
.ri-cue:hover .ri-cue-t{color:var(--navy-900);text-decoration-color:var(--navy-900)}
.ri-cue:hover .ri-cue-mark{background:var(--navy-800);box-shadow:0 0 0 1px rgba(147,98,18,.9)}
.ri-cue:hover .ri-cue-mark::before,.ri-cue:hover .ri-cue-mark::after{background:var(--parchment)}
.ri-cue:focus-visible{outline:2px solid var(--gold-600);outline-offset:5px}

/* ---- the plate ---- */
.ri-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vh,48px) 20px}
.ri-modal[hidden]{display:none}
.ri-scrim{position:absolute;inset:0;background:rgba(10,7,4,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .5s var(--ease-standard)}
.ri-modal.is-open .ri-scrim{opacity:1}
.ri-sheet{position:relative;width:min(760px,100%);max-height:100%;overflow-y:auto;background:#faf4e7;padding:46px clamp(24px,4.4vw,54px) 32px;box-shadow:0 0 0 1px rgba(147,98,18,.55),0 40px 90px rgba(42,24,16,.42);opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease-entrance),transform .55s var(--ease-entrance);--ri-bar:64px}
.ri-modal.is-open .ri-sheet{opacity:1;transform:none}
.ri-sheet::before{content:"";position:absolute;inset:9px;box-shadow:0 0 0 1px rgba(147,98,18,.24);pointer-events:none}
.ri-close{position:absolute;right:18px;top:16px;width:28px;height:28px;border:0;background:none;cursor:pointer;color:var(--espresso-800);font-size:12px;line-height:1;opacity:.65;transition:opacity .3s var(--ease-standard),color .3s var(--ease-standard)}
.ri-close:hover{opacity:1;color:var(--navy-900)}
.ri-close:focus-visible{outline:2px solid var(--gold-600);outline-offset:3px}
.ri-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(19px,2.2vw,26px);color:var(--navy-900);text-align:center;margin:0 0 34px;padding-left:.16em}

/* ---- the matrix ---- */
.ri-grid{display:flex;flex-direction:column}
/* each row is its own grid, so its rule runs unbroken across the plate */
.ri-row{display:grid;grid-template-columns:118px repeat(5,1fr);column-gap:clamp(8px,1.5vw,18px);align-items:center;border-top:1px solid rgba(147,98,18,.22)}
/* the discs share one edge, whether a name wraps to two lines or one */
.ri-row--head{border-top:0;align-items:start}
.ri-corner{grid-column:1}
.ri-col{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding-bottom:16px}
.ri-col-disc{position:relative;width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 2px 5px rgba(66,40,23,.28)}
.ri-col-disc i{position:absolute;inset:0;background:url("coffee-beans.webp") center/152% no-repeat;mix-blend-mode:luminosity;filter:brightness(var(--bri)) contrast(1.03)}
.ri-col-disc b{position:absolute;inset:0;background:radial-gradient(44% 38% at 32% 26%,rgba(255,242,214,.5),transparent 66%);mix-blend-mode:screen;opacity:var(--sh)}
.ri-col-t{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:10px;line-height:1.35;color:var(--espresso-900);padding-left:.13em}
.ri-row-t{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--navy-900);padding:20px 0;padding-left:.2em}
.ri-cell{padding:20px 0}
.ri-track{display:block;position:relative;width:min(100%,var(--ri-bar));height:5px;background:rgba(66,40,23,.1)}
.ri-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#a1701c,#c99b45 60%,#dcb96f)}
/* the fills are struck on opening — each row a beat behind the one above */
.ri-modal.is-open .ri-fill{width:var(--v);transition:width .85s var(--ease-entrance) var(--d,0s)}

/* ---- key + fine print ---- */
.ri-foot{margin-top:26px;padding-top:18px;border-top:1px solid rgba(147,98,18,.4);display:flex;flex-direction:column;align-items:center;gap:14px}
/* one bar, labelled at its ends only */
.ri-key{display:flex;align-items:center;gap:12px}
.ri-key-t{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;font-size:9px;color:var(--espresso-800);padding-left:.18em}
.ri-key-bar{width:var(--ri-bar);height:5px;background:linear-gradient(90deg,rgba(66,40,23,.1),#a1701c 22%,#c99b45 70%,#dcb96f)}
.ri-fine{margin:0;font-family:var(--font-body);font-size:11.5px;line-height:1.7;color:var(--espresso-800);text-align:center;max-width:56ch;font-style:italic}

@media (max-width:680px){
  .ri-modal{padding:12px 10px}
  .ri-sheet{padding:34px 14px 22px;--ri-bar:46px}
  .ri-sheet::before{inset:6px}
  .ri-close{right:12px;top:11px;width:34px;height:34px;font-size:13px}
  .ri-title{margin-bottom:20px}
  .ri-grid{column-gap:5px}
  .ri-row{grid-template-columns:64px repeat(5,1fr);column-gap:5px}
  .ri-col{gap:6px;padding-bottom:10px}
  .ri-col-disc{width:20px;height:20px}
  .ri-col-t{font-size:7.5px;letter-spacing:.06em;padding-left:.06em}
  .ri-row-t{font-size:9.5px;letter-spacing:.1em;padding:13px 0;padding-left:.1em}
  .ri-cell{padding:13px 0}
  .ri-track{height:4px}
  .ri-fine{font-size:10.5px;line-height:1.65}
  /* the cue is a tap target before it is a line of type */
  .ri-cue{padding:10px 6px}
}

@media (prefers-reduced-motion:reduce){
  .ri-scrim,.ri-sheet{transition:none}
  .ri-modal.is-open .ri-fill{transition:none}
}