/* "Pictures on this page" strip near the top of pages with visuals (site/visuals.py), and the brief highlight on the
   entry the viewer's "Go to this story" moves to (engine/zoom.js). Colour tokens from site.css; the picture frame
   colours are the ones event-images.css uses, so light and dark follow the rest of the site. */
.pg .vz{margin:0 0 20px;min-width:0}
.pg .vz-h{margin:0 0 2px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pg .vz-row{list-style:none;margin:0;padding:6px 6px 8px;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pg .vz-row li{margin:0;flex:0 0 auto;scroll-snap-align:start}
.pg .vz-t{position:relative;display:block;width:104px;height:78px;border-radius:10px;overflow:hidden;background:#e9e6df;
  color:var(--sheetink);text-decoration:none;outline-offset:2px}
.pg .vz-t img{display:block;width:100%;height:100%;object-fit:cover}
.pg .vz-k{position:absolute;left:4px;bottom:4px;display:inline-flex;align-items:center;gap:3px;max-width:calc(100% - 8px);
  padding:2px 6px;border-radius:99px;background:rgba(0,0,0,.66);color:#fff;font:700 12px/1.3 system-ui,sans-serif;white-space:nowrap}
.pg .vz-k svg{width:13px;height:13px;flex:0 0 auto}
.pg .vz-tile{background:var(--sheet);border:1px solid var(--line);box-sizing:border-box}
.pg .vz-ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;
  color:var(--sheetink);font:700 13px/1.2 system-ui,sans-serif}
.pg .vz-ic svg{width:26px;height:26px;color:var(--teal)}
/* films: a round play badge in the middle of the poster; the corner chip gives "Film 3:00" */
.pg .vz-play{position:absolute;left:50%;top:42%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.66);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.pg .vz-play svg{width:18px;height:18px;margin-left:2px}
.pg .vz-play path{fill:currentColor}
.pg .vz-t:hover{box-shadow:0 0 0 2px var(--teal)}
/* phones: run the strip to the screen edges so the next thumbnail peeks in */
@media (max-width:759px){.pg .vz-row{margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding:0 16px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pg .vz-t:not(.vz-tile){background:#1b1e24}
  :root:not([data-theme="light"]) .pg .vz-t img{filter:brightness(.92)}}
:root[data-theme="dark"] .pg .vz-t:not(.vz-tile){background:#1b1e24}
:root[data-theme="dark"] .pg .vz-t img{filter:brightness(.92)}
/* where "Go to this story" lands: a brief amber ring and tint, then back to normal */
.pg .vz-hit{outline:3px solid var(--amber);outline-offset:3px;background-color:var(--amber-soft);transition:outline-color .6s,background-color .6s}
.pg [tabindex="-1"]:focus:not(.vz-hit){outline:none}
/* clear of the sticky month heading on year pages (site.css .month>h2) */
.pg .vz-hit,.pg li[id],.pg article[id]{scroll-margin-top:12px}
.pg .month li[id],.pg .month article[id]{scroll-margin-top:68px}
/* a graphic picture's tile, covered by its content note until revealed (visuals.strip_html, engine/zoom.js) */
.pg .vz-t[hidden]{display:none}
.pg .vz-cn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;margin:0;
  background:var(--sheet);border:1px solid var(--line);box-sizing:border-box;font:inherit;cursor:pointer;text-align:center}
.pg .vz-cn[hidden]{display:none}
.pg .vz-cnk{font:800 12px/1.2 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--sheetink)}
.pg .vz-cns{font:700 12.5px/1.2 system-ui,sans-serif;color:var(--teal)}