/* Class level pop-ups (assets/levels.js) on the home page's Classical and Contemporary cards. */
.lvl-dot { position: relative; cursor: help; transition: opacity .15s, transform .15s; }
.photo-cards .dots.lvl-hovering i.lvl-dot { opacity: .3; } /* while one icon is hovered the others dim... */
.photo-cards .dots i.lvl-dot.is-active { opacity: 1; transform: scale(1.2); } /* ...and the hovered one is full white */
.lvl-dot::after { content: ""; position: absolute; inset: -8px -3px; } /* bigger hover/tap target than the 12px icon */
.lvl-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
.lvl-pop { position: fixed; z-index: 1000; width: min(320px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 14px;
  background: #fff; color: #111; box-shadow: 0 14px 36px rgba(0, 0, 0, .24); font-size: .9rem; line-height: 1.45; text-align: left; }
.lvl-pop[hidden] { display: none; }
.lvl-pop .lvl-title { font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.lvl-pop .lvl-tag { margin-left: .35em; font-weight: 600; letter-spacing: .04em; opacity: .55; }
.lvl-pop p { margin: .55em 0 0; }
.lvl-pop .lvl-lead { font-weight: 600; }
.lvl-pop .lvl-meta { font-size: .82rem; color: #444; }