/* ─────────────────────────────────────────────────────────────
   SPEAKER MEDALS · "hall of legends" coins with name ribbons
   ───────────────────────────────────────────────────────────── */
.medal { display: grid; justify-items: center; text-align: center; gap: 0; }
.medal__disc { position: relative; width: 168px; height: 168px; display: grid; place-items: center; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.3,1.2,.4,1); }
.medal:hover .medal__disc { transform: rotateY(360deg); }
.medal__runes { position: absolute; inset: -12px; border-radius: 50%; border: 1.5px dashed rgba(245,220,164,.55); animation: spin 30s linear infinite; }
.medal__runes::before { content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(245,220,164,.8) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 72%, transparent 73%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 72%, transparent 73%); }
.medal__laurel { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, #fff3c4, #e9bd67, #7a4a12, #f3c35f, #fff3c4, #b07a2a, #fff3c4);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%);
  filter: drop-shadow(0 0 12px rgba(233,189,103,.6)); }
.medal__face { position: relative; width: 74%; height: 74%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #5a2ea8, #24104f 60%, #120830); box-shadow: inset 0 0 0 2px rgba(255,240,200,.25), inset 0 -10px 30px rgba(217,54,127,.35), 0 0 30px rgba(217,54,127,.35);
  font: 400 2.4rem/1 var(--f-display); color: #fff3d6; text-shadow: 0 0 16px rgba(255,214,140,.8), 0 3px 0 #1c0838; }
.medal__ribbon { position: relative; margin-top: -14px; padding: 12px 34px; z-index: 1;
  background: linear-gradient(180deg, #c2224f, #8e1636 60%, #5e0d26); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
  box-shadow: inset 0 2px 0 rgba(255,220,170,.5), inset 0 -2px 0 rgba(233,189,103,.7); }
.medal__ribbon h4 { margin: 0; font: italic 900 1rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: #fff8ec; text-shadow: 0 2px 0 rgba(60,4,24,.9); white-space: nowrap; }
.medal__role { margin: 12px 0 0; color: var(--mist); font-size: .88rem; max-width: 24ch; }