.illustration-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.illustration-grid .brand-shot{background:transparent;aspect-ratio:auto;align-self:start;overflow:visible}
.illustration-grid .brand-shot img{height:auto;object-fit:contain}
.poster-grid .brand-shot{aspect-ratio:9/16}
.poster-grid .brand-shot img{height:100%;object-position:top}
.illustration-project:nth-child(2) .poster-grid .brand-shot{aspect-ratio:1250/2437}
.landscape-grid .brand-shot{aspect-ratio:1011/637}
.landscape-grid .brand-shot img{height:100%}
.bank-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.bank-grid .brand-shot{aspect-ratio:634/1009}
.bank-grid .brand-shot img{height:100%}
.illustration-subtitle{font-size:15px;font-weight:400;color:#888;margin:32px 0 18px}
:is(.illustration-page,.single-reader) .lightbox-content{width:min(720px,64vw)}
:is(.illustration-page,.single-reader) .lightbox-content img{aspect-ratio:auto}

/* One artwork per viewport, with space to see the gallery behind it. */
:is(.illustration-page,.single-reader) .brand-lightbox{scroll-snap-type:y mandatory;overscroll-behavior:contain}
:is(.illustration-page,.single-reader) .lightbox-content{width:100%;margin:0;box-shadow:none;animation:none}
.illustration-reader-page{height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
:is(.illustration-page,.single-reader) .illustration-reader-page img{width:auto;height:auto;max-width:min(680px,58vw);max-height:72vh;max-height:72dvh;object-fit:contain;background:transparent;box-shadow:0 16px 50px #0004}

:is(.illustration-page,.single-reader) .brand-lightbox{overflow:hidden;scroll-snap-type:none}
:is(.illustration-page,.single-reader) .lightbox-content{position:relative;height:100vh;height:100dvh;pointer-events:none}
.illustration-reader-page{position:absolute;inset:0;flex-direction:column;gap:22px;will-change:transform,opacity}
.illustration-reader-page[hidden]{display:none}
.illustration-swipe-hint{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-size:12px;letter-spacing:1px;text-shadow:0 1px 4px #0008}
.swipe-count{font-size:10px;opacity:.65;letter-spacing:2px}
.swipe-mouse{display:block;width:14px;height:23px;border:1px solid #fff9;border-radius:9px;position:relative}
.swipe-mouse::after{content:'';position:absolute;left:6px;top:4px;width:1px;height:6px;background:white;animation:illustration-swipe 1.8s ease-in-out infinite}
@keyframes illustration-swipe{0%,100%{transform:translateY(0);opacity:.9}65%{transform:translateY(6px);opacity:.35}}
@media(prefers-reduced-motion:reduce){.swipe-mouse::after{animation:none}}

:is(.illustration-page,.single-reader) .illustration-reader-page img{box-shadow:none;filter:drop-shadow(0 12px 20px #0003)}

:is(.illustration-page,.single-reader) .illustration-reader-page img{filter:none}

.illustration-reader-page.is-back{z-index:0;transform:translateY(-10vh) scale(.87);opacity:.3;pointer-events:none}
.illustration-reader-page.is-back img{pointer-events:none}
.illustration-reader-page.is-back .illustration-swipe-hint{visibility:hidden}
.illustration-reader-page.is-current{z-index:1;transform:none;opacity:1}
:is(.illustration-page,.single-reader) .illustration-reader-page .trim-card-edge{clip-path:inset(2px round 5.6% / 3.5%)}

.personal-style-grid .brand-shot{aspect-ratio:1748/2480}
.personal-style-grid .brand-shot img{height:100%;object-fit:contain}
.practice-row{gap:20px;align-items:start}
.practice-row-one{grid-template-columns:.707fr .707fr 1.897fr}
.practice-row-two{grid-template-columns:1.414fr 1.414fr 1.465fr;margin-top:24px}
.practice-row .brand-shot{aspect-ratio:auto}
.practice-row .brand-shot img{width:100%;height:auto}

.comic-grid .brand-shot{aspect-ratio:3/4;overflow:hidden;background:#fff;display:flex;flex-direction:column;align-self:start}
.comic-grid .brand-shot img{width:100%;height:calc(100% - 34px);min-height:0;object-fit:contain;object-position:center;flex:1}
.comic-caption{display:block;position:relative;width:100%;box-sizing:border-box;flex:none;padding:9px;background:#fffffff0;color:#666;font-size:11px;letter-spacing:1px;text-align:center}
.illustration-reader-page .comic-scroll{width:min(580px,60vw);height:72vh;height:72dvh;overflow:auto;overscroll-behavior:contain;border-radius:16px;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#aaa #fff}
:is(.illustration-page,.single-reader) .comic-scroll img{display:block;width:100%;height:auto;max-width:none;max-height:none;border-radius:0!important;background:#fff}
.illustration-reader-page.is-back .comic-scroll{pointer-events:none}

#personal-style{scroll-margin-top:110px}

.bank-grid-five{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Give the horizontal practice artwork more room in the single-image reader. */
.illustration-page .illustration-reader-page img.practice-landscape-preview{max-width:min(840px,72vw)}