/* The surface — recently-conceived images as a seamless wall of tiles, flush against each other, over the starfield, under the animated Mememage wordmark (the wordmark + subtitle come straight from layout.css + mememage.css, exactly like the decoder). Click a tile → full-res in a lightbox. No chrome. */ .feed-body { background: #060609; color: #e8e8ef; min-height: 100vh; margin: 0; } .feed-body .page-header { padding-top: 2.2rem; } /* breathing room (no panel here) */ .feed-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0; /* tiles flush against each other */ padding: 0; } .feed-tile { display: block; aspect-ratio: 1 / 1; overflow: hidden; cursor: zoom-in; background: rgba(255, 255, 255, 0.03); } .feed-tile img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: transform 0.5s ease, opacity 0.6s ease; } .feed-tile img[src] { opacity: 1; } .feed-tile:hover img { transform: scale(1.04); } @media (max-width: 520px) { .feed-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } } /* Lightbox — appended to (not ) so mememage.css's `body > *` rule can't force position:relative and break the fixed centering. */ .feed-lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 2.5vmin; background: rgba(2, 2, 4, 0.94); cursor: zoom-out; } .feed-lightbox.open { display: flex; } .feed-lightbox-img { max-width: 96vw; max-height: 96vh; object-fit: contain; box-shadow: 0 0 70px rgba(0, 0, 0, 0.7); }