/* Contact sheet: a grid of all frames of a series with numbers and dates, selects circled in red pencil.
   Opens from a series and covers the page below the menu. Markup: js/components/contact-sheet.js */
.sheet h3{margin:0 0 24px;font:500 11px var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sheet .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 16px}
.sheet .grid button{position:relative;display:grid;gap:6px;text-align:left}
.sheet .ph{position:relative;aspect-ratio:3/2;width:100%}
.sheet .ph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;display:block}
.sheet .n{font:500 10px var(--m);letter-spacing:.08em;color:var(--mute)}
.sheet .act .n{color:var(--ink)}
.sheet .act .ph{outline:1px solid var(--ink);outline-offset:4px}
.sheet .mark{position:absolute;inset:-10% -7%;width:114%;height:120%;overflow:visible;pointer-events:none}

.sr-sheet{position:absolute;inset:0;z-index:5;background:var(--bg);overflow-y:auto;padding:calc(80px + var(--safe-t)) var(--gut) 60px}
/* from a series: on phones its title docks under the menu and Close stays bottom right */
.sr-sheet .sh-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}
.sr-sheet .sh-top h3{margin:0}
.sr-sheet .sh-close{font:500 12px var(--m);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .sr-sheet{z-index:49;padding:0 var(--gut) 90px} /* no top padding: a sticky child measures its offset from inside the padding */
  .sr-sheet .sh-top{margin:calc(110px + var(--safe-t)) 0 14px;padding:10px 0;position:sticky;top:calc(50px + var(--safe-t));z-index:2;background:var(--bg)}
  .sr-sheet .sh-top::before{content:"";position:absolute;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));bottom:0;height:240px;background:var(--bg);z-index:-1} /* no frame shows between menu and title */
  .sr-sheet .sh-close{position:fixed;right:var(--gut);bottom:calc(18px + var(--safe-b));z-index:3;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none}
}