*{box-sizing:border-box}
html{background:#fff}
body{margin:0;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif}
.header{height:75px;position:relative;text-align:center}
.header h1{font-size:28px;line-height:.99;letter-spacing:-1.1px;margin:3px 0 0;font-weight:750}
/* Keep all eight columns as the viewport narrows. The images and spaces scale together. */
.gallery{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:clamp(9px,1.28vw,20px);row-gap:clamp(9px,1.28vw,20px);padding:30px 10px 45px;align-items:center}
.tile{border:0;padding:0;background:transparent;cursor:zoom-in;width:100%;aspect-ratio:1/1;min-height:0;display:flex;align-items:center;justify-content:center}
.tile img,.tile video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.tile video{pointer-events:none;background:transparent}
.viewer{position:fixed;inset:0;background:#fff;z-index:20;display:flex;align-items:center;justify-content:center}
.viewer[hidden]{display:none}
.viewer img,.viewer video{max-width:calc(100vw - 110px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);object-fit:contain}
.viewer video[hidden]{display:none}
.viewer button{border:0;background:none;color:#000;cursor:pointer;position:absolute;font-family:Arial,sans-serif}
.close{right:15px;top:4px;font-size:45px}
/* Invisible half-screen click targets, with directional arrow cursors. */
.viewer .viewer-zone{position:absolute;top:0;bottom:0;width:50%;z-index:3;border:0;padding:0;background:transparent;color:transparent;font-size:0}
.viewer-zone-left{left:0;cursor:url("cursor-left.png") 24 24,w-resize!important}
.viewer-zone-right{right:0;cursor:url("cursor-right.png") 24 24,e-resize!important}
.viewer .close{z-index:7}

.viewer-header{position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none}
/* A single decisive switch to the two-column tablet/phone composition. */
@media(max-width:760px){
.gallery{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:18px;padding:16px 14px 36px}
.tile{aspect-ratio:1/1}
.viewer img,.viewer video{max-width:calc(100vw - 45px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}

}
@media(max-width:400px){.gallery{column-gap:12px;row-gap:12px;padding-left:10px;padding-right:10px}}
/* Invert the viewer title against the actual artwork underneath, pixel by pixel. */
/* Blend the entire transparent header with the artwork behind it.
   Applying difference to h1 inside a positioned stacking context does not
   reliably blend against the artwork outside that context. */
.viewer-header{z-index:5;mix-blend-mode:difference;isolation:auto}
.viewer-header h1{color:#fff;mix-blend-mode:normal}

/* Fixed, contrast-inverting title on the gallery, without changing gallery placement. */
body > .header{position:fixed;top:0;left:0;right:0;z-index:10;pointer-events:none;mix-blend-mode:difference;background:transparent}
body > .header h1{color:#fff}
body > .gallery{margin-top:75px}
.viewer-zone-left{cursor:url("cursor-left.png") 18 18,w-resize!important}
.viewer-zone-right{cursor:url("cursor-right.png") 18 18,e-resize!important}

/* More breathing room above the fixed gallery title. */
body > .header h1{margin-top:19px}

/* Match viewer title position to the fixed gallery title. */
.viewer-header h1{margin-top:19px}

/* Mobile: constrain every artwork to its square grid cell and clear the title. */
@media (max-width:760px){
  body > .gallery{margin-top:75px;padding-top:42px;}
  .tile{min-width:0;min-height:0;overflow:hidden;}
  .tile img,.tile video{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;}
}

/* Mobile: full column width, intrinsic artwork proportions, rows follow tallest work. */
@media (max-width:760px){
  .gallery{align-items:start;}
  .tile{aspect-ratio:auto;height:auto;min-height:0;overflow:visible;display:block;}
  .tile img,.tile video{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain;}
}