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

/* the mouth */
.tn-mouth { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.tn-sipbtn { cursor: pointer; }
.tn-sipbtn rect { stroke: rgba(252,192,80,.5); stroke-width: 1.5; }
.tn-lb.wl { fill: #f4d9df; }
.tn-mouth.dry .tn-sipbtn { opacity: .5; }
.tn-film { fill: rgba(63,214,154,.10); stroke: rgba(63,214,154,.4); stroke-width: 1; stroke-dasharray: 4 3; transition: opacity .8s; }
.tn-mouth.dry .tn-film { opacity: .15; }
.tn-pap circle { fill: #5a1a2c; opacity: 0; transition: opacity .8s; }
.tn-mouth.dry .tn-pap circle { opacity: .9; }
.tn-p { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tn-p ellipse { fill: var(--mint); transition: fill .3s; }
.tn-p.bound ellipse { fill: #cfc3b0; stroke: #4a3f33; stroke-width: 1.5; }
.tn-tan { opacity: 0; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.tn-tan.in { opacity: 1; }
.tn-tan circle { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1; }
.tn-key { display: flex; gap: 16px; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.tn-key span { display: inline-flex; align-items: center; gap: 6px; }
.tn-key i { width: 14px; height: 8px; border-radius: 999px; }
.tn-key .p { background: var(--mint); } .tn-key .t { width: 10px; height: 10px; background: var(--gold); }
.tn-slip, .tn-grip { width: 100%; max-width: 360px; }
.tn-grip .gt i { background: var(--gold); }

/* the hide */
.tn-hide { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.tn-fib { fill: none; stroke: #c9a27a; stroke-width: 7; stroke-linecap: round; opacity: .8; }
.tn-link line { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.tn-link circle { fill: var(--gold); }
.tn-link { opacity: 0; transition: opacity .4s; }
.tn-hide.tanned .tn-link { opacity: 1; }
.tn-hide.tanned .tn-fib { stroke: #9a6a3c; }
.tn-bug { transition: transform .6s cubic-bezier(.3,.7,.3,1), opacity .4s; opacity: 0; }
.tn-bug circle { fill: rgba(216,85,85,.3); stroke: var(--red); stroke-width: 2; }
.tn-bug path { stroke: var(--red); stroke-width: 2; stroke-linecap: round; }
.tn-bug.try { opacity: 1; transform: translate(206px, 100px) !important; }
.tn-bug.off { transform: translate(250px, 150px) !important; opacity: .35; }

/* wine glass */
.tn-glass { width: 150px; height: auto; display: block; overflow: visible; }
.tn-glass.small { width: 96px; }
.tn-glass .bowl, .tn-glass .stem, .tn-glass .base { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.tn-glass .bowl { fill: rgba(255,255,255,.03); }
.tn-glass .liquid { transition: height .9s cubic-bezier(.2,.8,.2,1), y .9s cubic-bezier(.2,.8,.2,1), fill .9s; }

/* the squeeze */
.tn-press { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; position: relative; min-height: 200px; }
.tn-grape { padding: 8px; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.tn-grape img { display: block; width: 130px; height: auto; filter: drop-shadow(0 12px 20px rgba(0,0,0,.5)); transition: transform .25s cubic-bezier(.34,1.56,.64,1); animation: tn-nudge 1.2s ease-in-out 2; }
.tn-grape.sq img { transform: scale(1.12, .84); animation: none; }
@keyframes tn-nudge { 50% { transform: scale(1.06); } }
.tn-drops { position: absolute; left: 50%; top: 42%; width: 0; }
.tn-drops i { position: absolute; left: -4px; top: 0; width: 9px; height: 13px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: #e9dfb0; opacity: 0; animation: tnDrop .9s ease-in both; }
@keyframes tnDrop { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(34px, 70px); } }

/* the vat */
.tn-vat { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tn-kind { font-family: var(--serif); font-size: 22px; font-weight: 600; min-height: 30px; text-transform: capitalize; color: var(--faint); transition: color .3s; }
.tn-kind.white { color: #f2e2b8; } .tn-kind.rose { color: #f0a0b8; } .tn-kind.red { color: #ff7a8a; }

/* the plate */
.tn-foods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tn-foods .choice { flex-direction: column; gap: 8px; padding: 12px 6px 10px; font-weight: 700; font-size: 14px; }
.tn-foods img { width: 74px; height: 74px; object-fit: contain; }

@media (max-height: 700px) {
  .tn-glass { width: 120px; }
  .tn-mouth { max-width: 300px; }
  .tn-press { min-height: 170px; }
  .tn-grape img { width: 110px; }
}