/* Hippocampus lesson. All rules scoped under .hpc-* */
.hpc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hpc-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.hpc-ct { font: 700 12.5px var(--sans); color: var(--dim); }

/* the room */
.hpc-room { position: relative; width: 100%; max-width: 340px; display: flex; gap: 10px; align-items: flex-end; min-height: 200px; padding: 6px 0; }
.hpc-who { flex: none; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hpc-who img { width: 120px; display: block; }
.hpc-who span { font: 700 12.5px var(--sans); color: var(--dim); }
.hpc-thread { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; min-height: 180px; }
.hpc-b { max-width: 100%; padding: 9px 13px; border-radius: 18px; font: 600 15px/1.3 var(--sans); animation: hpcIn .35s cubic-bezier(.2,.9,.3,1.2) both; }
.hpc-b.him { align-self: flex-start; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); border-bottom-left-radius: 6px; }
.hpc-b.you { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 6px; }
@keyframes hpcIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.hpc-dark { position: absolute; inset: -6px; border-radius: 18px; background: rgba(8,10,20,.94); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .45s; }
.hpc-dark.on { opacity: 1; }
.hpc-dark b { font: 600 22px var(--serif); color: var(--gold); }

.hpc-brain img { display: block; width: 100%; max-width: 320px; max-height: 210px; object-fit: contain; }
/* A set height: the picture options grow into the room left over, measured before the image loads. */
.hpc-alz .hpc-brain img { height: 190px; }

/* the photo */
.hpc-photo { margin: 0; width: 100%; max-width: 340px; }
.hpc-pic { position: relative; border-radius: 14px; overflow: hidden; }
.hpc-pic img { display: block; width: 100%; }
.hpc-curtain { position: absolute; top: 0; bottom: 0; left: 54%; right: 0; background: linear-gradient(135deg, #2A2F48, #1B1F33); border-left: 2px solid var(--line-strong); transition: transform .9s cubic-bezier(.6,0,.2,1); }
.hpc-curtain::after { content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 54px var(--serif); color: var(--gold); }
.hpc-photo.open .hpc-curtain { transform: translateX(102%); }
.hpc-photo figcaption { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }

/* the mirror star */
.hpc-star { width: 100%; max-width: 320px; display: block; touch-action: none; }
.hpc-mirror { fill: #1C2236; stroke: #8FA3C8; stroke-width: 3; }
.hpc-track { fill: none; stroke: rgba(245,192,78,.22); stroke-linejoin: round; }
.hpc-mid { fill: none; stroke: rgba(245,192,78,.55); stroke-width: 1.5; stroke-dasharray: 3 5; }
.hpc-ink line { stroke-width: 3; stroke-linecap: round; }
.hpc-ink .i { stroke: var(--gold); }
.hpc-ink .o { stroke: var(--red); }
.hpc-start { fill: none; stroke: var(--mint); stroke-width: 2.5; }
.hpc-pen { fill: #fff; stroke: var(--gold); stroke-width: 3; }
.hpc-read { font: 600 14px var(--sans); color: var(--dim); }
.hpc-read b { color: var(--text); font-variant-numeric: tabular-nums; }

/* three days */
.hpc-days { width: 100%; max-width: 340px; display: block; }
.hpc-bar { fill: var(--violet-bright); }
.hpc-ax { stroke: var(--line-strong); stroke-width: 2; }
.hpc-sep { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.hpc-dl { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }

@media (max-height: 700px) {
  .hpc-room { min-height: 170px; }
  .hpc-thread { min-height: 150px; }
  .hpc-who, .hpc-who img { width: 100px; }
  .hpc-brain img { max-height: 170px; }
  .hpc-alz .hpc-brain img { height: 170px; }
  .hpc-star { max-width: 280px; }
}