/* Media page: every screenshot in justified rows (each card keeps the screenshot's own proportions). Built by build-media-page.mjs; viewer in viewer.js. */
.media-shell{padding:70px var(--gutter) 90px}
.media-heading{display:flex;flex-wrap:wrap;gap:28px 60px;align-items:flex-end;justify-content:space-between;padding-bottom:46px}
.media-heading .eyebrow{font-size:13px;letter-spacing:.12em;color:#97979f;line-height:1.6}
.media-heading h1{font:600 clamp(42px,6vw,78px)/1.04 'Barlow Condensed',sans-serif;letter-spacing:-.02em;color:#bdbdc2;margin:24px 0 0}
.media-heading h1 span{color:#941313}
.media-intro{max-width:520px}
.media-intro p{margin:0 0 22px;color:#a2a2a8;font-size:16px;line-height:1.6}
.media-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.media-actions .button{cursor:pointer;font:inherit}
.media-hint{color:#7f777d;font-size:12px;letter-spacing:.04em;line-height:1.5}
.media-grid{--row:200px;display:flex;flex-wrap:wrap;gap:10px}
.media-grid::after{content:"";flex:999999 1 0}
.media-card{position:relative;flex:var(--r) 1 calc(var(--r) * var(--row));overflow:hidden;background:#151218}
.media-card img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.65,.25,1)}
.media-card:hover img,.media-card:focus-visible img{transform:scale(1.03)}
.media-card:focus-visible{outline:2px solid #b03a30;outline-offset:2px}
.media-credit{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,#08090bd9);color:#e1d6d6;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .25s;pointer-events:none}
.media-credit::before{content:"Screenshot by ";color:#a99ea4}
.media-card:hover .media-credit,.media-card:focus-visible .media-credit{opacity:1}
.media-footer{border-top:1px solid #353237;padding:28px var(--gutter);display:flex;gap:24px;justify-content:space-between;font-size:14px}
.media-footer p{margin:0}
.media-footer a{color:#bdbdc2;text-decoration:underline;text-decoration-color:#77211c;text-underline-offset:5px}
@media(hover:none){.media-credit{opacity:1}}
@media(max-width:1000px){.media-grid{--row:160px}}
@media(max-width:640px){.media-shell{padding:46px var(--gutter) 60px}.media-heading{padding-bottom:30px}.media-grid{--row:150px;gap:6px}.media-hint{display:none}.media-footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.media-card img{transition:none}}