/* Chili Peppers lesson. Everything scoped under .chp-*. */
.chp-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chp-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }
.chp-hero img { width: 300px; max-width: 100%; max-height: 30vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* the map */
.chp-mapbox { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.chp-frame { border-radius: 16px; background: radial-gradient(120% 120% at 50% 40%, #13213a, #0c1324); border: 1px solid var(--line); padding: 6px 4px; }
.chp-map { width: 100%; display: block; overflow: visible; }
.chp-land { fill: #2a3450; stroke: #3a4666; stroke-width: 1; }
.chp-origin { opacity: 0; transition: opacity .8s; }
.chp-map.lit .chp-origin { opacity: 1; }
.chp-dot { fill: #FF6A3D; stroke: #2a0e05; stroke-width: 2; }
.chp-rt { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; opacity: .85; transition: stroke-dashoffset .7s ease-out; }
.chp-rt.on { stroke-dashoffset: 0; }
.chp-st { opacity: 0; transition: opacity .4s .5s; }
.chp-st.on { opacity: 1; }
.chp-ring { fill: none; stroke: #FF6A3D; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.chp-st.new .chp-ring { animation: chpRing 1s ease-out .5s 2; }
@keyframes chpRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.chp-pdot { fill: var(--gold); stroke: #3a2600; stroke-width: 3; }
.chp-lb { font: 700 20px var(--sans); fill: var(--text); paint-order: stroke; stroke: #0c1324; stroke-width: 5px; }
.chp-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chp-chips span { font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--faint); transition: color .3s, border-color .3s, background .3s; }
.chp-chips span.on { color: #FFD9C9; border-color: rgba(255,106,61,.6); background: rgba(255,106,61,.14); }

/* the sort */
.chp-dish { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chp-dish b { font-size: 18px; }
.chp-dish span { font-size: 13.5px; color: var(--dim); font-weight: 600; }

@media (max-height: 700px) {
  .chp-hero img { max-height: 24vh; }
}