/* Narrow: three rows; wide: four rows of (photo height + two 19.8px lines + 8px label gap + 32px row gap).
Wide width also respects the 110px header + 80px top gap + 16px footer gap + 70px footer. */
.list-layout{--gap:24px;--grid-w:min(872px,calc(92vw - 18px));--photo-w:calc((var(--grid-w) - 3 * var(--gap)) / 4);--frame-h:calc(3 * (var(--photo-w) * 2 / 3 + 79.6px));position:relative;width:var(--grid-w);margin-inline:auto}
.grid-scroll{width:calc(var(--grid-w) + 18px);height:var(--frame-h);overflow-y:auto;overflow-x:hidden;padding-right:12px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#ccc transparent;scroll-padding-block:4px}
.grid-scroll::-webkit-scrollbar{width:6px}.grid-scroll::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.grid-scroll::-webkit-scrollbar-track{background:transparent}
.works-grid{width:var(--grid-w);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px var(--gap);align-items:start;padding-bottom:32px}
.work-item{min-width:0;display:block;text-decoration:none!important;scroll-margin-block:4px}.picture-frame{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:3/2;background:#fafafa;overflow:hidden}.picture-frame img{display:block;width:min(100%,var(--native-w));height:auto;max-width:100%;object-fit:contain;transition:opacity .2s}.work-item:hover img{opacity:.85}
.work-name,.work-location{display:block;font-size:12px;line-height:1.65;font-weight:400}.work-name{margin-top:8px;color:#222}.work-location{color:#767676}.work-item:hover:not(:active) :is(.work-name,.work-location){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.list-layout:after{content:"";position:absolute;inset:auto 0 0;height:24px;background:linear-gradient(transparent,#fff);pointer-events:none;opacity:0}.list-layout.has-more:after{opacity:1}
@media(min-width:1030px){.site-header{height:110px}.site-footer{height:70px}.list-layout{--usable-w:calc(92vw - 18px);--outside-h:276px;--row-extra:79.6px;--width-limit:calc((var(--usable-w) - 3 * 24px) / 4);--height-limit:calc(((100dvh - var(--outside-h)) / 4 - var(--row-extra)) * 3 / 2);--photo-w:max(140px,min(var(--width-limit),var(--height-limit),360px));--grid-w:calc(4 * var(--photo-w) + 3 * 24px);--frame-h:calc(4 * (var(--photo-w) * 2 / 3 + var(--row-extra)))}}
@media(max-width:600px){.list-layout{--gap:12px;--grid-w:calc(100vw - 48px)}}
@media(prefers-reduced-motion:reduce){.picture-frame img{transition:none}}

/* Confirmed mobile layout: two columns and normal page scrolling. */
@media(max-width:600px){.list-layout{--gap:16px;--photo-w:calc((var(--grid-w) - var(--gap)) / 2)}.grid-scroll{width:100%;height:auto;overflow:visible;padding-right:0;scrollbar-gutter:auto}.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.list-layout:after{display:none}}

/* fix10: short wide screens — page scroll instead of an inner frame (one scrollbar, no cut rows). */
@media(min-width:1030px){.list-layout.page-scroll{--grid-w:min(872px,calc(92vw - 18px));--photo-w:calc((var(--grid-w) - 3 * 24px) / 4)}.list-layout.page-scroll .grid-scroll{width:100%;height:auto;overflow:visible;padding-right:0;scrollbar-gutter:auto}.list-layout.page-scroll:after{display:none}}
@media(min-width:601px) and (max-width:1029px){.grid-scroll{width:100%;height:auto;overflow:visible;padding-right:0;scrollbar-gutter:auto}.list-layout:after{display:none}}

/* Short wide screens: start in page-scroll layout (same rules as .page-scroll) so the JS fallback causes no layout shift. */
@media(min-width:1030px) and (max-height:967px){.list-layout{--grid-w:min(872px,calc(92vw - 18px));--photo-w:calc((var(--grid-w) - 3 * 24px) / 4)}.list-layout .grid-scroll{width:100%;height:auto;overflow:visible;padding-right:0;scrollbar-gutter:auto}.list-layout:after{display:none}}