/* Paradox of hedonism lesson. Everything scoped under .ph-*. */
.ph-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ph-hero img { display: block; width: 250px; max-width: 100%; max-height: 28vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.3)); }
.ph-hero.small img { width: 170px; max-height: 17vh; }

/* the reader's own face: the mouth bends with the slider */
.ph-face { width: min(160px, 24vh); }
.ph-face svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(252,192,80,.25)); }
.ph-head { fill: var(--gold); }
.ph-eye { fill: #2a1c05; }
.ph-mouth { fill: none; stroke: #2a1c05; stroke-width: 5; stroke-linecap: round; }

.ph-quote { margin: 0; max-width: 320px; padding: 20px 18px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line); font: 700 22px/1.3 var(--serif); color: var(--text); text-align: center; }
.ph-quote cite { display: block; margin-top: 12px; font: 600 13px var(--sans); font-style: normal; color: var(--dim); }

/* the music study's three groups */
.ph-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 340px; }
.ph-g { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); text-align: center; transition: border-color .3s, opacity .3s; }
.ph-g b { font-size: 14px; line-height: 1.25; color: var(--text); }
.ph-g span { font-size: 13px; font-weight: 700; min-height: 16px; }
.ph-g.win { border-color: var(--mint); }
.ph-g.win span { color: var(--mint); }
.ph-g.lose span { color: var(--red); }

/* where attention goes */
.ph-spots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.ph-spot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 54px 8px 14px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line); text-align: center; overflow: hidden; }
.ph-beam { position: absolute; top: -10px; left: 50%; width: 90px; height: 80px; margin-left: -45px; background: radial-gradient(ellipse at 50% 0, rgba(252,192,80,.55), transparent 70%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.ph-spot:not(.on) .ph-beam { background: radial-gradient(ellipse at 50% 0, rgba(123,92,253,.55), transparent 70%); }
.ph-spot b { font-size: 16px; color: var(--text); }
.ph-spot span { font-size: 13px; color: var(--dim); line-height: 1.3; }
.ph-spot.on span { color: var(--gold); }

/* the bar over one evening */
.ph-eve { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; }
.ph-read { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 12px; border-radius: 12px; background: var(--raised); border: 1.5px solid var(--line); }
.ph-read span { font-size: 13px; font-weight: 700; color: var(--dim); }
.ph-read b { font: 700 18px var(--sans); color: var(--text); }
.ph-read.up b { color: var(--mint); }
.ph-read.dn b { color: var(--red); }
.ph-track { position: relative; height: 22px; margin: 26px 0 30px; border-radius: 11px; background: var(--raised); border: 1px solid var(--line); }
.ph-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 11px; background: linear-gradient(90deg, rgba(252,192,80,.25), rgba(252,192,80,.6)); }
.ph-real, .ph-bar { position: absolute; top: -8px; bottom: -8px; width: 4px; margin-left: -2px; border-radius: 2px; }
.ph-real { background: var(--gold); }
.ph-bar { background: var(--violet-bright); transition: left .15s; }
.ph-real em, .ph-bar em { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 12px var(--sans); font-style: normal; }
.ph-real em { bottom: -22px; color: var(--gold); }
.ph-bar em { top: -22px; color: var(--violet-bright); }
.ph-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); }

/* the film tag */
.ph-tag { padding: 8px 14px; border-radius: 12px; background: var(--raised); border: 1.5px solid var(--line); font-size: 14px; font-weight: 700; color: var(--text); text-align: center; }

/* the two traps */
.ph-traps { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 330px; }
.ph-trap { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); transition: border-color .3s; }
.ph-trap b { font-size: 16px; color: var(--text); }
.ph-trap span { font-size: 14px; color: var(--dim); }
.ph-trap.on { border-color: var(--gold); }