/* Terroir lesson. Everything scoped under .trr-*. */
.trr-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.trr-lb { fill: var(--text); font: 700 13px var(--sans); text-anchor: middle; }
.trr-lb.dim { fill: var(--dim); font-weight: 600; }
.trr-lb.gold { fill: var(--gold); }

/* the rock */
.trr-rock { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.trr-soil { fill: #3a2a22; }
.trr-ground { stroke: #6a8a3a; stroke-width: 4; }
.trr-trunk { stroke: #7a5a3a; stroke-width: 5; stroke-linecap: round; }
.trr-grapes circle { fill: #4a2a6a; stroke: #1c1030; stroke-width: .8; }
.trr-root { fill: none; stroke: #c9a27a; stroke-width: 2.5; stroke-linecap: round; opacity: .8; }
.trr-rk { cursor: pointer; transition: opacity .3s; }
.trr-rk.done path { opacity: .7; }
.trr-hit { fill: transparent; }
.trr-rock.glow .trr-grapes circle { fill: #6a3a9a; }
.trr-rnames { width: 100%; max-width: 340px; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font: 700 13px var(--sans); color: var(--dim); margin-top: -4px; }
.trr-key { display: flex; gap: 14px; font: 700 12.5px var(--sans); color: var(--dim); }
.trr-key span { display: inline-flex; align-items: center; gap: 6px; }
.trr-key i { width: 10px; height: 10px; border-radius: 50%; }

/* the slope */
.trr-hill { display: block; width: 100%; max-width: 340px; height: auto; border-radius: 14px; overflow: hidden; }
.trr-land { fill: #4a3a2a; }
.trr-stones { stroke: #8a7a64; stroke-width: 3; stroke-linecap: round; }
.trr-hill.day .trr-skyr, .trr-hill:not(.night) .trr-skyr { fill: #2b3c6a; }
.trr-hill.night .trr-skyr { fill: url(#trr-sky); }
.trr-moon { fill: #eae3d7; }
.trr-star { fill: #eae3d7; opacity: .7; }
.trr-stk { stroke: #7a5a3a; stroke-width: 3; stroke-linecap: round; }
.trr-lv { fill: #3f8a3a; stroke: #1f4a1c; stroke-width: 1; transition: fill .6s; }
.trr-bn circle { fill: #4a2a6a; }
.trr-vs { transition: transform .9s cubic-bezier(.3,1.4,.5,1); transform-box: fill-box; transform-origin: 50% 100%; }
.trr-air { fill: rgba(120,180,255,.35); }
.trr-pool { fill: rgba(120,180,255,.35); }
.trr-hill.frosted .trr-v[data-k="bottom"] .trr-lv { fill: #cfe3f5; stroke: #8ab0d0; }
.trr-wetm { fill: url(#trr-wet); opacity: 0; transition: opacity .8s; }
.trr-hill.wet .trr-wetm { opacity: .85; }
.trr-drop { stroke: rgba(160,200,255,.8); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: trrRain .7s ease-in 2 both; }
@keyframes trrRain { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(150px); } }
.trr-hill.grown .trr-v[data-k="bottom"] .trr-vs { transform: scale(1.5); }
.trr-hill.grown .trr-v[data-k="middle"] .trr-vs { transform: scale(.85); }
.trr-glb { fill: none; stroke: rgba(234,227,215,.5); stroke-width: 1.5; }
.trr-gl { opacity: 0; transition: opacity .4s; }
.trr-hill.pour .trr-gl { opacity: 1; }
.trr-glw.mid { fill: #4a0a1e; }
.trr-glw.bot { fill: #c8506e; }
.trr-wall { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; opacity: .55; }

@media (max-height: 700px) {
  .trr-hill, .trr-rock { max-width: 290px; }
}