/* Sea salt lesson. All rules scoped under .ssa-* */
.ssa-air { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ssa-air img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ssaDrift 9s ease-out both; }
@keyframes ssaDrift { from { transform: scale(1.25) translate(4%, 4%); } to { transform: scale(1); } }

.ssa-air.still img { animation: none; }
.ssa-pin { position: absolute; translate: -50% -50%; padding: 5px 10px; border-radius: 10px; background: rgba(10,14,26,.82); font: 800 13px var(--sans); color: var(--text); white-space: nowrap; animation: ssaPin .5s ease-out .3s both; }
.ssa-pin.early { border: 1.5px solid #4f9e6b; }
.ssa-pin.late { border: 1.5px solid #dc7a8c; animation-delay: .6s; }
@keyframes ssaPin { from { opacity: 0; translate: -50% -30%; } }
.ssa-cap { position: absolute; left: 16px; right: 16px; bottom: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(10,14,26,.85); font: 700 13.5px var(--sans); color: var(--text); text-align: center; }
.ssa-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ssa-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }

/* the pond */
.ssa-pond { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.ssa-ground { fill: #5a4632; }
.ssa-rim { fill: none; stroke: #8a7154; stroke-width: 4; stroke-linejoin: round; }
.ssa-water { transition: fill .6s; opacity: .85; }
.ssa-layer { opacity: 0; transition: opacity .5s; }
.ssa-layer.on { opacity: 1; }
.ssa-layer.chalk { fill: #cdb98f; }
.ssa-layer.gyp { fill: #eeeae2; }
.ssa-layer.salt rect { fill: #ffffff; stroke: #c9c3ea; stroke-width: .8; }
.ssa-layer.bitter circle { fill: #b58b3c; opacity: .9; }
.ssa-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ssa-chip { display: flex; flex-direction: column; align-items: center; min-width: 70px; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); opacity: .45; transition: opacity .3s, border-color .3s; }
.ssa-chip b { font: 800 13px var(--sans); color: var(--text); }
.ssa-chip i { font: 600 12px var(--sans); font-style: normal; color: var(--dim); }
.ssa-chip.on { opacity: 1; border-color: var(--gold); }
.ssa-chip[data-k="bitter"].on { border-color: #b58b3c; }

/* the harvest */
.ssa-photo { display: flex; justify-content: center; }
.ssa-photo img { width: min(100%, 340px); border-radius: 14px; box-shadow: 0 6px 14px rgba(0,0,0,.35); margin-bottom: 14px; }
@media (max-height: 700px) { .ssa-photo img { width: 280px; } }

/* 100 grains */
.ssa-jar { display: grid; grid-template-columns: repeat(10, 18px); grid-auto-rows: 18px; gap: 4px; }
.ssa-jar i { display: block; border-radius: 3px; background: #f4f2ff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); transition: transform .6s, background .4s; }
.ssa-jar i.odd { background: #f4f2ff; }
.ssa-jar.sorted i.odd { background: #b58b3c; transform: scale(1.25); box-shadow: 0 0 0 2px #e8c27a; }
.ssa-legend { display: flex; gap: 14px; font: 700 13px var(--sans); color: var(--dim); opacity: 0; transition: opacity .4s; }
.ssa-legend.on { opacity: 1; }
.ssa-legend span { display: flex; align-items: center; gap: 6px; }
.ssa-legend i { width: 12px; height: 12px; border-radius: 3px; background: #f4f2ff; }
.ssa-legend i.odd { background: #b58b3c; }
@media (max-height: 700px) { .ssa-jar { grid-template-columns: repeat(10, 14px); grid-auto-rows: 14px; gap: 3px; } }

/* a gram of each */
.ssa-pair { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ssa-pair img { width: min(100%, 300px); height: auto; filter: drop-shadow(0 10px 18px rgba(123,92,253,.28)); }
.ssa-pairlab { display: flex; justify-content: space-around; width: min(100%, 300px); font: 800 13.5px var(--sans); color: var(--text); }
@media (max-height: 700px) { .ssa-pair img { width: 220px; } }