/* Tulip Mania lesson. All rules scoped under .tlp-* */
.tlp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tlp-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }
.tlp-hero img { width: 280px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.tlp-pic img { width: 100%; max-width: 360px; display: block; border-radius: 12px; }
.tlp-g { width: 100%; max-width: 360px; }
.tlp-svg { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }

/* people */
.tlp-coat { stroke: rgba(169,155,255,.35); stroke-width: 1.2; }
.tlp-collar { fill: #EDE8F5; }
.tlp-face { fill: #E6C3A0; }
.tlp-hat { fill: #1C1A26; stroke: rgba(169,155,255,.35); stroke-width: 1; }
.tlp-p.hold .tlp-face { stroke: var(--gold); stroke-width: 2.5; }
.tlp-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.tlp-p.no .tlp-pin { animation: tlpNo .6s ease-in-out; }
@keyframes tlpNo { 20% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 80% { transform: rotate(-4deg); } }

/* tavern */
.tlp-wall { fill: rgba(123,92,253,.07); }
.tlp-table, .tlp-desk { fill: #6B4A33; }
.tlp-paper rect { fill: #F3E7C9; stroke: #C9A96A; stroke-width: 1; }
.tlp-paper circle { fill: #E6D4A8; stroke: #C9A96A; stroke-width: 1; }
.tlp-paper path { stroke: #9C7F4A; stroke-width: 1.2; fill: none; }

/* ground */
.tlp-soil { fill: #3B2A22; }
.tlp-snow { fill: #E9ECF6; transition: opacity 1s; }
.tlp-sky { fill: rgba(123,92,253,.06); transition: fill 1s; }
.tlp-bulb { fill: #C9A06A; stroke: #E8C690; stroke-width: 1.5; transition: stroke .3s; }
.tlp-bulb.lit { stroke: var(--gold); stroke-width: 3; }
.tlp-root { stroke: #A88A62; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.tlp-lab { fill: #D9CFC5; font: 600 13px var(--sans); }
.tlp-svg:not(.tlp-spring) .tlp-flower { display: none; }
.tlp-stem { stroke: #4FAE6A; stroke-width: 4; fill: none; stroke-linecap: round; }
.tlp-leaf { fill: #3E9A58; }
.tlp-pet { fill: #E2453C; stroke: #FFD9D2; stroke-width: 1.2; }
.tlp-flame { stroke: #FFF4EE; stroke-width: 2; fill: none; stroke-linecap: round; }
.tlp-spring.thaw .tlp-snow { opacity: 0; }
.tlp-spring.thaw .tlp-sky { fill: rgba(252,192,80,.12); }

@media (max-height: 700px) {
  .tlp-hero img { max-height: 30vh; }
  .tlp-svg { max-height: 220px; }
  .tlp-auc { max-height: 130px; }
}