/* Hedonism lesson. Everything scoped under .hn-*. */
.hn-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hn-hero img { display: block; width: 240px; max-width: 100%; max-height: 28vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.3)); }
.hn-hero.wide img { width: 310px; }
.hn-note { text-align: center; font-size: 13px; color: var(--dim); }

/* the chain of whys, growing upward */
.hn-ladder { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 6px; position: relative; padding-left: 18px; }
.hn-ladder::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(var(--gold), var(--violet)); opacity: .6; }
.hn-rung { padding: 8px 14px; border-radius: 12px; background: var(--raised); border: 1.5px solid var(--line); font: 600 15px var(--serif); color: var(--text); }
.hn-rung.in { animation: hn-up .35s cubic-bezier(.2,.8,.2,1); }
@keyframes hn-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.hn-rung.base { color: var(--dim); }
.hn-rung.top { border-color: var(--gold); background: rgba(252,192,80,.14); color: var(--gold); }
.hn-rung.none { border-style: dashed; color: var(--faint); text-align: center; }

/* the jars */
.hn-jars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.hn-meter { display: grid; grid-template-columns: 44px 1fr 56px; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--raised); border: 1.5px solid var(--line); transition: border-color .4s, box-shadow .4s; }
.hn-meter span { font-size: 13px; font-weight: 700; color: var(--dim); }
.hn-meter i { height: 12px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.hn-meter u { display: block; height: 100%; width: 100%; border-radius: 6px; background: var(--red); transition: width .5s ease; }
.hn-meter b { font: 700 14px var(--sans); color: var(--red); text-align: right; }
.hn-meter.calm { border-color: var(--mint); box-shadow: 0 0 18px rgba(63,214,154,.35); }
.hn-meter.calm b { color: var(--mint); }
.hn-jrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hn-jar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 16px; cursor: pointer; transition: opacity .4s; -webkit-tap-highlight-color: transparent; }
.hn-jar svg { width: 100%; max-width: 86px; height: min(130px, 17vh); }
.hn-jar b { font-size: 15px; color: var(--text); }
.hn-jst { font-size: 12px; font-weight: 700; color: var(--dim); min-height: 15px; }
.hn-jpain { fill: rgba(216,85,85,.22); }
.hn-jline { fill: none; stroke: var(--line-strong); stroke-width: 2.5; }
.hn-jfill { fill: #5aa9ff; }
.hn-hunger .hn-jfill { fill: #e0a252; }
.hn-fame .hn-jfill { fill: var(--gold); }
.hn-crack { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.hn-drip { position: absolute; left: 50%; top: min(124px, 16.5vh); width: 7px; height: 9px; margin-left: -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--gold); opacity: 0; }
.hn-drip.b { margin-left: 4px; }
.hn-jar.leak .hn-drip { animation: hn-drip 1.1s ease-in 2; }
.hn-jar.leak .hn-drip.b { animation-delay: .35s; }
@keyframes hn-drip { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
.hn-jar.cut { opacity: .35; }
.hn-jar.cut .hn-jpain { fill: transparent; }
.hn-jar.cut b { text-decoration: line-through; }

.hn-quote { margin: 0; max-width: 330px; padding: 18px 16px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line); font: 600 19px/1.35 var(--serif); color: var(--text); text-align: center; }
.hn-quote cite { display: block; margin-top: 10px; font: 600 13px var(--sans); font-style: normal; color: var(--dim); }

/* three hedonists */
.hn-who { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 8px; }
.hn-who > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); transition: border-color .3s; }
.hn-who b { font-size: 16px; color: var(--gold); }
.hn-who span { font: 600 15px/1.3 var(--serif); color: var(--text); }
.hn-who > div.win { border-color: var(--mint); }

@media (max-height: 700px) {
  .hn-ladder { gap: 4px; }
  .hn-rung { padding: 5px 12px; font-size: 14px; }
  .hn-jar svg { height: 104px; }
  .hn-drip { top: 100px; }
  .hn-quote { font-size: 17px; }
}