/* Overview: an endless canvas of all frames over the name; hover shows a frame's caption under it */
.field{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.field.grabbing{cursor:grabbing}
/* the name is a quiet, near-neutral tint of the background in both themes, not a contrasting headline */
.bigname{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none;color:color-mix(in srgb,var(--ink) 10%,var(--bg));font-weight:600;font-stretch:100%;font-size:200px;letter-spacing:-.01em;line-height:.8;white-space:nowrap}

.tile{position:absolute;left:0;top:0;z-index:1;will-change:transform;transform-origin:0 0;background:var(--ph)}
.tile.up{z-index:3}
.tile img{display:block;width:100%;height:100%;max-width:none;opacity:0;transition:transform .18s var(--ease),opacity .9s cubic-bezier(.4,0,.2,1);-webkit-user-drag:none;pointer-events:none}
.tile img.ld{opacity:1}
.tile.press img{transform:scale(.94)}
.tile .fno{position:absolute;left:0;bottom:100%;margin-bottom:4px;font:500 9px/1 var(--m);font-style:normal;letter-spacing:.06em;white-space:nowrap;color:var(--ink);opacity:.6} /* frame number above the tile */
.tile .mark{position:absolute;inset:-12% -9%;width:118%;height:124%;overflow:visible;pointer-events:none;z-index:2} /* red pencil circle around a select */

/* caption under the hovered tile: title, then year · camera · settings */
.tcap{position:absolute;left:0;top:0;z-index:7;background:var(--bg);opacity:0;transition:opacity .2s;pointer-events:none;will-change:transform;white-space:pre;line-height:1.5;font-size:10px;letter-spacing:.05em;padding:4px 10px 4px 0}
.tcap::first-line{font-family:var(--f);font-size:13px;letter-spacing:0;font-weight:500}
.tcap.on{opacity:1}

/* where the mouse steering is anchored after a drag (a brief cross) */
.anchor{position:absolute;left:-9px;top:-9px;width:18px;height:18px;z-index:6;pointer-events:none;opacity:0}
.anchor::before,.anchor::after{content:"";position:absolute;background:var(--ink)}
.anchor::before{left:8px;top:0;width:2px;height:18px}
.anchor::after{top:8px;left:0;height:2px;width:18px}

/* the provenance line bottom left: what these frames are, © and Legal */
.proofline{position:absolute;left:var(--gut);bottom:calc(18px + var(--safe-b));z-index:5;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);pointer-events:none}
.proofline a{color:inherit;text-decoration:underline;text-underline-offset:3px;pointer-events:auto}