/* Every gallery item fills its column; avoid letterboxing narrow portrait files. */
.artwork-presentation{position:relative;width:100%;min-width:0;overflow:hidden}
.index-select>.artwork-presentation{aspect-ratio:var(--art-ratio)}
.index-frame .artwork-presentation>img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:top}
.project-reader .project-pages .artwork-presentation>img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.artwork-presentation[data-kind="logo-landscape"]{aspect-ratio:3/2}
.artwork-presentation[data-kind="logo-square"]{aspect-ratio:1}
.index-frame .artwork-presentation[data-kind^="logo-"]>img,
.project-reader .project-pages .artwork-presentation[data-kind^="logo-"]>img,
.artwork-presentation.reader-zoom-flight[data-kind^="logo-"]>img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Rounded screen windows sit on colours taken from each project's visual palette. */
.artwork-presentation.mobile-board{background:var(--board-color);container-type:inline-size;display:grid;place-items:center;padding:8% 10%;aspect-ratio:3/2}
.artwork-presentation.mobile-board[data-kind="mobile-single"]{aspect-ratio:4/5;padding:9% 10%}
.device-deck{width:100%;display:flex;justify-content:center;align-items:center;gap:5%}
.device-screen{position:relative;flex:0 0 29%;aspect-ratio:9/19.5;overflow:hidden;border-radius:6.5% / 3%;background:#fff;box-shadow:0 1.2cqw 2.8cqw #00000017,0 0 0 .12cqw #00000016}
[data-kind="mobile-single"] .device-screen{flex-basis:60%}
.index-frame .device-screen>img,.project-reader .project-pages .device-screen>img,
.reader-zoom-flight .device-screen>img{display:block;width:100%;height:100%;max-height:none;max-width:none;object-fit:cover}
.artwork-presentation.reader-zoom-flight>img{display:block;width:100%;height:100%;object-fit:fill}

/* Related screens form one board, with distinct source artwork per window. */
.artwork-presentation[data-kind="mobile-sequence"][data-screen-count="2"]{padding-inline:16%}
[data-kind="mobile-sequence"][data-screen-count="2"] .device-deck{gap:8%}
[data-kind="mobile-sequence"][data-screen-count="2"] .device-screen{flex-basis:34%}

.index-frame .artwork-presentation>img{object-position:var(--art-position,top)}
.artwork-presentation.mobile-board[data-kind="mobile-mockup"]{aspect-ratio:1;padding:10%;background:radial-gradient(ellipse at 25% 10%,#eee5,transparent 58%),linear-gradient(150deg,var(--board-color),#4c3839);perspective:900px}
[data-kind="mobile-mockup"]::before{content:"";position:absolute;inset:70% -10% -20%;background:linear-gradient(150deg,#eee8,#a58c84);transform:skewY(-12deg);box-shadow:0 -1px 0 #fff6}
[data-kind="mobile-mockup"] .device-deck{position:relative;transform:rotate(-13deg) rotateY(-15deg)}
[data-kind="mobile-mockup"] .device-screen{flex-basis:40%;border:clamp(2px,.7cqw,8px) solid #292528;border-radius:12% / 5.5%;box-shadow:2cqw 3cqw 3cqw #0005,.5cqw .3cqw 0 #82777c}
[data-kind="mobile-mockup"] .device-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#fff4,transparent 30%,transparent 70%,#fff1);pointer-events:none}