:root { --bg-color: #1a1a1a; --text-color: #eeeeee; --gap: 10px; } * { box-sizing: border-box; } body { margin: 0; padding: 2rem; background: var(--bg-color); color: var(--text-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } .logo { font-weight: 700; letter-spacing: -0.05em; } header a { color: var(--text-color); text-decoration: none; } /* ------------------------------------------------------------------------- Gallery grid ------------------------------------------------------------------------- */ .gallery { display: flex; flex-wrap: wrap; gap: var(--gap); } .photo-item { position: relative; overflow: hidden; cursor: pointer; /* * content-visibility: auto lets the browser skip rendering off-screen items. * contain-intrinsic-size provides a size estimate so layout doesn't collapse * before the image loads. Adjust the height estimate if your photos skew * significantly landscape or portrait. */ content-visibility: auto; contain-intrinsic-size: 300px 220px; } .photo-item img { display: block; width: 100%; height: 100%; object-fit: cover; vertical-align: middle; } /* ------------------------------------------------------------------------- Sentinel — invisible element at gallery bottom that triggers chunk loads. Kept tiny so it doesn't affect layout. ------------------------------------------------------------------------- */ .gallery-sentinel { width: 100%; height: 1px; flex-basis: 100%; /* force it below the flex row */ } /* ------------------------------------------------------------------------- Lightbox ------------------------------------------------------------------------- */ #lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } #lightbox.open { opacity: 1; pointer-events: auto; } #lightbox-stage { position: relative; width: 100vw; height: 100vh; overflow: hidden; cursor: zoom-in; touch-action: none; } #lightbox-stage.dragging { cursor: grabbing; } #lightbox-image { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-width: none; max-height: none; transform-origin: center center; user-select: none; -webkit-user-drag: none; cursor: inherit; pointer-events: auto; } #lightbox-close { position: fixed; top: 20px; right: 20px; z-index: 1100; background: rgba(0, 0, 0, 0.6); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 40px; text-align: center; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.2s ease, transform 0.1s ease; } #lightbox-close:hover { background: rgba(255, 255, 255, 0.2); } #lightbox-close:active { transform: scale(0.9); } .nav-btn { position: fixed; top: 50%; transform: translateY(-50%); z-index: 1100; width: 60px; height: 60px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: white; font-size: 40px; line-height: 60px; text-align: center; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.2s ease, transform 0.1s ease; } .nav-btn:hover { background: rgba(255, 255, 255, 0.2); } .nav-btn:active { transform: translateY(-50%) scale(0.9); } #lightbox-prev { left: 20px; } #lightbox-next { right: 20px; } /* * Scroll lock — applied to (not body) when lightbox opens. * overflow:hidden on the root element stops scrolling without moving the * page or touching position, so there is nothing to restore on close. * Mobile Safari handles this correctly; position:fixed on body does not. */ html.lightbox-open { overflow: hidden; } /* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (max-width: 700px) { body { padding: 1rem; } header { margin-bottom: 1.5rem; } .nav-btn { width: 48px; height: 48px; line-height: 48px; font-size: 32px; } #lightbox-prev { left: 10px; } #lightbox-next { right: 10px; } #lightbox-close { top: 10px; right: 10px; } }