/* 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; }
.ph-note { text-align: center; font-size: 12px; color: var(--faint); }

/* 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); }

/* New Year's Eve */
.ph-bars { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 8px; }
.ph-row { display: grid; grid-template-columns: 150px 1fr 34px; align-items: center; gap: 8px; }
.ph-row span { font-size: 13px; font-weight: 700; color: var(--text); }
.ph-row i { height: 14px; border-radius: 7px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; }
.ph-row u { display: block; height: 100%; width: 0; border-radius: 7px; background: var(--red); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.ph-row b { font: 700 14px var(--mono); color: var(--text); }
.ph-bars small { text-align: center; font-size: 12px; color: var(--faint); }

/* the two articles, the films */
.ph-arts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.ph-art { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border-radius: 14px; background: #f3efe6; color: #1c1a16; box-shadow: 0 10px 24px rgba(0,0,0,.35); min-height: 150px; }
.ph-art b { font: 700 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #6b5a2e; }
.ph-art span { font: 700 17px/1.3 var(--serif); }
.ph-art.hap { outline: 3px solid var(--gold); }
.ph-tag, .ph-sad { 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; }
.ph-sad { display: flex; flex-direction: column; gap: 6px; padding: 26px 20px; max-width: 280px; border-color: #3a3f5c; }
.ph-sad b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.ph-sad span { font: 700 20px var(--serif); }

/* 2003 vs 2013 */
.ph-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 330px; }
.ph-duo div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: var(--raised); border: 1.5px solid var(--line); text-align: center; }
.ph-duo b { font: 700 14px var(--mono); color: var(--dim); }
.ph-duo span { font-size: 14px; font-weight: 700; color: var(--text); }
.ph-duo .up { border-color: var(--gold); }

/* four regions */
.ph-regs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 330px; }
.ph-reg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); text-align: center; transition: border-color .3s; }
.ph-reg b { font-size: 16px; color: var(--text); }
.ph-reg span { font-size: 15px; font-weight: 700; color: var(--faint); }
.ph-reg.up { border-color: var(--mint); }
.ph-reg.up span { color: var(--mint); }
.ph-reg.dn { border-color: var(--red); }
.ph-reg.dn span { color: var(--red); }
.ph-reg.flat span { color: var(--dim); }

/* 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); }