:root{color-scheme:light;--cream:#f5e8de;--burgundy:#6b1733;--ink:#302329}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:9px;background:var(--cream);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
main{width:100%;max-width:980px;margin:auto}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;align-items:start}
.poster{appearance:none;display:block;width:100%;padding:0;margin:0;line-height:0;text-align:initial;position:relative;cursor:pointer;border:1px solid #bfa8a7;border-radius:11px;overflow:hidden;background:#e7ded8;transition:transform .2s ease,box-shadow .2s ease}
.poster img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.poster:hover,.poster:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 2px var(--burgundy),0 0 18px rgba(107,23,51,.45);outline:0}
.poster::after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(35deg,rgba(77,10,30,.55),transparent 57%);opacity:0;transition:opacity .2s ease}
.poster:hover::after,.poster:focus-visible::after{opacity:1}
.info-dot{position:absolute;right:7px;top:7px;z-index:1;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:rgba(246,231,220,.9);color:#631b35;font-size:14px;font-weight:900;line-height:1;box-shadow:0 0 0 1px rgba(60,20,30,.15)}
.info-popup{position:fixed;z-index:200;display:block;width:min(334px,calc(100vw - 18px));max-height:calc(100dvh - 16px);overflow:auto;padding:17px 16px 15px;border:1px solid #9d5468;border-radius:15px;background:linear-gradient(150deg,#fffaf4,#f2e3dc 79%);color:#2b1922;box-shadow:0 15px 40px rgba(41,12,21,.3),0 0 0 3px rgba(113,22,48,.07);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px) scale(.98);transition:opacity .16s,transform .16s,visibility .16s}
.info-popup.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.info-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#431126,#8c234a,#421224)}
.popup-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.popup-kicker{font-size:10px;text-transform:uppercase;letter-spacing:2px;font-weight:800;color:#834358;margin:0 0 8px}
.popup-name{font-size:21px;line-height:1.12;letter-spacing:-.4px;margin:0;font-weight:830}
.popup-x{flex-shrink:0;border:0;border-radius:7px;width:27px;height:27px;background:#f0d9da;color:#602238;font-size:20px;cursor:pointer;line-height:1}
.popup-tags{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:11px 0 13px}
.popup-tag{font-size:11px;font-weight:600;border:1px solid #e0c6c6;color:#6c3346;border-radius:100px;padding:4px 9px;background:#fff7f2}
.popup-label{font-size:9px;text-transform:uppercase;letter-spacing:1.9px;font-weight:800;color:#864255;margin:0 0 4px}
.popup-desc{font-size:12.5px;line-height:1.5;margin:0 0 13px;color:#372930}
.popup-trivia{background:#f3e1df;border-left:3px solid #772445;border-radius:0 6px 6px 0;padding:10px 11px;margin:0 0 11px;font-size:12px;line-height:1.48;color:#352831}
.popup-link{font-size:11px;font-weight:700;color:#832343;text-underline-offset:3px}
.popup-tip{font-size:10px;color:#927780;margin:10px 0 0}
@media(max-width:360px){body{padding:5px}.grid{gap:6px}.poster{border-radius:7px}.info-popup{padding:14px}}
@media(prefers-reduced-motion:reduce){*,*::after{transition:none!important;scroll-behavior:auto!important}}