/* Ergotism lesson. All rules scoped under .erg-* */
.erg-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.erg-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.erg-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* the villages */
.erg-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; }
.erg-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; min-height: 150px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); font: 600 13px var(--sans); cursor: pointer; }
.erg-wh { font: 700 14px var(--sans); }
.erg-ic { width: 34px; height: 34px; }
.erg-ic .sun { fill: var(--gold); stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.erg-ic .cloud { fill: rgba(169,155,255,.35); stroke: var(--violet-bright); stroke-width: 1.5; }
.erg-ic .drop { stroke: #7FB8FF; stroke-width: 2.5; stroke-linecap: round; }
.erg-l { color: var(--dim); font-size: 13px; }
.erg-out { margin-top: 4px; padding: 3px 6px; border-radius: 8px; font: 700 13px var(--sans); visibility: hidden; }
.erg-card.open .erg-out { visibility: visible; }
.erg-card.open { cursor: default; }
.erg-card.sick { border-color: var(--red); }
.erg-card.sick .erg-out { background: rgba(255,107,107,.16); color: var(--red); }
.erg-card.fine .erg-out { background: rgba(63,214,154,.14); color: var(--mint); }

/* the photo */
.erg-fig img { max-height: 34vh; }

/* the body */
.erg-bfig { width: 100%; max-width: 200px; }
.erg-body { display: block; width: 100%; height: auto; }
.erg-limb path { stroke: rgba(169,155,255,.28); stroke-width: 16; stroke-linecap: round; fill: none; }
.erg-head { fill: rgba(169,155,255,.28); }
.erg-ves path { stroke: #E0607A; stroke-width: 6; stroke-linecap: round; fill: none; }
.erg-heart { fill: #E0607A; }
.erg-ends > * { fill: rgb(200,150,190); }

/* the painting */
.erg-paint img { width: 230px; max-width: 100%; max-height: 36vh; object-fit: contain; display: block; border-radius: 10px; }

/* the salt water */
.erg-tank { display: block; width: 100%; max-width: 230px; height: auto; overflow: visible; }
.erg-water { fill: rgba(127,184,255,.16); }
.erg-glass { fill: none; stroke: rgba(169,155,255,.6); stroke-width: 2.5; }
.erg-wl { fill: var(--dim); font: 600 13px var(--sans); text-anchor: middle; }
.erg-gr { fill: #E4C58A; stroke: #B8955A; stroke-width: 1; }
.erg-er { fill: #3B2337; stroke: #8C5A7E; stroke-width: 1.2; }
.erg-items { opacity: 0; }
.erg-tank.erg-poured .erg-items { opacity: 1; }
.erg-tank.erg-done .erg-er { stroke: var(--gold); stroke-width: 2; }

@media (max-height: 700px) {
  .erg-card { min-height: 132px; padding: 8px 3px; }
  .erg-bfig { max-width: 170px; }
  .erg-paint img { max-height: 30vh; }
}