/* "On set, lately" contact sheet. Matches the mockup; needs the Permanent Marker and IBM Plex Mono fonts the page loads. */
.cs{background:#121110;border-radius:6px;padding:28px 28px 34px;color:#E9E4DA;position:relative;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.cs-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.cs-title{font-family:'Permanent Marker',cursive;color:#E6372B;font-size:30px;transform:rotate(-2deg);display:inline-block}
.cs-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#8C857A;letter-spacing:.08em}
.cs-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:22px}
.cs-fr{position:relative;background:#050505;padding:16px 4px 22px;display:block;color:inherit;text-decoration:none}
.cs-fr[hidden]{display:none}
.cs-fr::before,.cs-fr::after{content:"";position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,transparent 0 5px,#2A2723 5px 12px,transparent 12px 16px)}
.cs-fr::before{top:4px}.cs-fr::after{bottom:4px}
.cs-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;filter:saturate(.9) contrast(1.05);transition:filter .3s ease}
.cs-fr:hover .cs-img,.cs-fr:focus-visible .cs-img{filter:saturate(1.1) contrast(1.1) brightness(1.08)}
.cs-fr:focus-visible{outline:2px solid #F2C230;outline-offset:2px}
.cs-no{position:absolute;left:6px;bottom:10px;font-family:'IBM Plex Mono',monospace;font-size:9px;color:#D7892E;letter-spacing:.05em}
.cs-play{position:absolute;right:8px;top:22px;width:16px;height:16px;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));pointer-events:none}
.cs-mk{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cs-mk path{stroke:#E6372B;stroke-width:3.2;opacity:.92}
.cs-mk.yel path{stroke:#F2C230}
.cs-note{position:absolute;font-family:'Permanent Marker',cursive;font-size:20px;color:#E6372B;line-height:1;pointer-events:none;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.cs-note.yel{color:#F2C230}
.cs-note.tr{top:-2px;right:6px;transform:rotate(8deg)}
.cs-note.bl{bottom:20px;left:8px;transform:rotate(-6deg)}
.cs-note.tl{top:-2px;left:8px;transform:rotate(-7deg)}
.cs-margin{font-family:'Permanent Marker',cursive;color:#F2C230;font-size:17px;transform:rotate(3deg);display:inline-block;margin-left:auto;margin-right:18px}
.cs-foot{margin-top:18px;font-family:'Permanent Marker',cursive;color:#F2C230;font-size:18px;transform:rotate(-1deg);display:inline-block}
.cs-foot a{color:inherit}
@media (max-width:900px){.cs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.cs{padding:18px 12px 24px}.cs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-note{font-size:15px}.cs-title{font-size:24px}}
@media (prefers-reduced-motion:reduce){.cs-img{transition:none}}