(between gallery-header and the first curated section). Single-row status + thin progress bar. No console feed, no green — strictly the site's red/white/dim palette. Fades 1.8s after the EXPLORATION FEED tiles finish loading. ────────────────────────────────────────────────────────────────────── */ .archive-stream { border-bottom: 1px solid var(--border); padding: 14px 28px 12px; background: transparent; font-family: 'Space Mono', monospace; font-size: 11px; color: var(--text-dim, #888); transition: opacity 0.6s ease, max-height 0.7s ease, padding 0.5s ease, border-color 0.5s ease; overflow: hidden; max-height: 80px; } .archive-stream.as-gone { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; pointer-events: none; } .archive-stream .as-row { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .archive-stream .as-status { letter-spacing: 0.06em; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-dim, #888); } .archive-stream .as-status .br { color: var(--accent, #ff2e2e); opacity: 0.7; } .archive-stream .as-sep { color: var(--text-dim, #555); } .archive-stream .as-state { display: inline-block; min-width: 110px; color: var(--accent, #ff2e2e); text-align: left; } .archive-stream .as-freq { color: #fff; font-variant-numeric: tabular-nums; min-width: 96px; display: inline-block; } .archive-stream .as-count, .archive-stream .as-pct { color: #ddd; font-variant-numeric: tabular-nums; } .archive-stream .as-bar { height: 2px; background: rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; } .archive-stream .as-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; background: var(--accent, #ff2e2e); transition: width 0.3s ease; } .archive-stream.as-complete .as-state { color: #fff; } .archive-stream.as-complete .as-fill { background: #fff; opacity: 0.85; } @media (max-width: 720px) { .archive-stream { padding: 12px 16px 10px; } .archive-stream .as-row { gap: 8px; flex-wrap: wrap; } .archive-stream .as-state { min-width: 88px; } .archive-stream .as-freq { min-width: 80px; } } /* ────────────────────────────────────────────────────────────────────── EXPLORATION FEED — section header + grid hookup + footnote ────────────────────────────────────────────────────────────────────── */ #exploration-feed { border-top: 1px solid var(--border); margin-top: 0; } #exploration-feed .ef-header { border-bottom: 1px solid var(--border); } .ef-footnote { text-align: center; font-family: 'Space Mono', monospace; font-size: 10.5px; color: var(--text-dim, #555); letter-spacing: 0.12em; padding: 22px 16px 36px; border-top: 1px solid var(--border); transition: color 0.4s ease; } .ef-footnote.ef-pulse { color: var(--accent, #ff2e2e); } .ef-footnote .br { opacity: 0.7; } #ef-sentinel { height: 1px; margin-top: -1px; } @media (max-width: 720px) { .ef-footnote { padding: 18px 12px 28px; } } /* ────────────────────────────────────────────────────────────────────── EXPLORATION FEED — varied tile sizes (masonry-feel) The grid is 4 columns at desktop, 2 columns on mobile. Row height is driven by JS to match column width so squares stay square + spans produce clean 1×2 / 2×1 / 2×2 proportions. Dense auto-flow packs gaps. ────────────────────────────────────────────────────────────────────── */ #explore-feed-grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; /* grid-auto-rows set inline by JS to match column width */ } .ef-tile { position: relative; overflow: hidden; cursor: pointer; background: #0a0a0a; } .ef-tile.ef-tile-sq { grid-column: span 1; grid-row: span 1; } .ef-tile.ef-tile-tall { grid-column: span 1; grid-row: span 2; } .ef-tile.ef-tile-wide { grid-column: span 2; grid-row: span 1; } .ef-tile.ef-tile-feature { grid-column: span 2; grid-row: span 2; } /* 2026-05-16 — LISTEN tile, inserted into the feed every N items. FULL-WIDTH (spans every column of the feed grid) and 2 rows tall on wider viewports — a major break in the visual rhythm that drops the swirly WebGL "LISTEN" visualization in as a mouse-reactive moment. Click → /music. */ .ef-tile.ef-tile-listen { /* Full-width 16:9 — same proportions across desktop and mobile so the interactive WebGL piece reads consistent. aspect-ratio overrides the grid-auto-rows height; grid-row: auto lets it size by aspect. */ grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; position: relative; background: #050505; overflow: hidden; cursor: pointer; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ef-tile.ef-tile-listen .ef-listen-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: auto; } .ef-tile.ef-tile-listen .ef-listen-overlay { /* Mirrors the original homepage music-feature overlay: subtle dark vignette at top + bottom so the < MUSIC > tag and < FREQUENCY ARCHIVE > button stay readable as the white blob moves underneath. */ position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.35) 100%); } .ef-tile.ef-tile-listen .ef-listen-tag { /* Top-left small red label, with text-shadow for readability. */ position: absolute; top: 24px; left: 32px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--red); font-weight: 700; text-transform: uppercase; text-shadow: 0 0 12px rgba(0,0,0,0.7); pointer-events: none; } .ef-tile.ef-tile-listen .ef-listen-cta { /* Bottom-right CTA chip with backdrop-blur — matches the original music-archive .ma-listen treatment. Pointer-events on so the chip itself is hoverable; click bubbles up to the tile's anchor for nav. */ position: absolute; bottom: 24px; right: 32px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: var(--bright); text-transform: uppercase; padding: 10px 16px; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; text-decoration: none; transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s; } .ef-tile.ef-tile-listen:hover .ef-listen-cta { border-color: var(--red); background: rgba(192,57,43,0.25); color: #fff; transform: translateY(-2px); } @media (max-width: 600px) { /* Tighten label positions for the smaller mobile box (16:9 tile). */ .ef-tile.ef-tile-listen .ef-listen-tag { top: 14px; left: 18px; font-size: 9px; } .ef-tile.ef-tile-listen .ef-listen-cta { bottom: 14px; right: auto; left: 50%; transform: translateX(-50%); font-size: 9px; padding: 8px 12px; } .ef-tile.ef-tile-listen:hover .ef-listen-cta { transform: translate(-50%, -2px); } } /* Transmissions / On Something promo videos — vertical, MUST NOT be cropped (Chris 2026-05-15). Portrait 1×2 tile with contain-fit. */ .ef-tile.ef-tile-vtall { grid-column: span 1; grid-row: span 2; } /* Movements videos — square tiles (Chris 2026-05-15: "I want all that stuff to be square. Don't mess with that."). 1×1 with contain-fit. */ .ef-tile.ef-tile-vsq { grid-column: span 1; grid-row: span 1; } /* Images cover-fit so they fill their tile box edge-to-edge */ .ef-tile .ef-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, filter 0.3s; filter: brightness(0.85) saturate(0.9); } .ef-tile:hover .ef-thumb { transform: scale(1.04); filter: brightness(1.05) saturate(1.05); } /* Videos contain-fit — never cropped. Letterboxes against the tile background where aspect doesn't match. */ .ef-tile .ef-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; transition: filter 0.3s; filter: brightness(0.92) saturate(0.95); } .ef-tile:hover .ef-video { filter: brightness(1.0) saturate(1.0); } /* Feature tiles get a slight painterly treatment — softer, slightly desaturated resting state so when they "wake up" on hover the contrast lands. Mirrors how evocation features the painterly stills on its gallery page. */ .ef-tile-feature .ef-thumb { filter: brightness(0.78) saturate(0.85) contrast(1.04); } .ef-tile-feature:hover .ef-thumb { filter: brightness(1.0) saturate(1.0) contrast(1.05); } /* Video tiles — subtle "▶" cue in the corner */ .ef-tile-vtall .tile-plus, .ef-tile-vsq .tile-plus { color: var(--accent, #ff2e2e); font-size: 14px; } @media (max-width: 900px) { #explore-feed-grid { grid-template-columns: repeat(3, 1fr); } .ef-tile.ef-tile-feature { grid-column: span 2; grid-row: span 2; } } @media (max-width: 600px) { #explore-feed-grid { grid-template-columns: repeat(2, 1fr); } .ef-tile.ef-tile-feature { grid-column: span 2; grid-row: span 2; } .ef-tile.ef-tile-wide { grid-column: span 2; grid-row: span 1; } }