#one-lens{padding:clamp(88px,10vw,156px) 0;overflow:hidden}
#one-lens .one-lens-inner{width:min(100% - 48px,1400px);margin-inline:auto}
#one-lens .one-lens-head{max-width:760px;margin-bottom:clamp(36px,4vw,64px)}
#one-lens .one-lens-kicker{margin:0 0 22px;color:var(--accent);font:400 12px/1.4 var(--mono);letter-spacing:.04em}
#one-lens h2{margin:0;color:var(--ink);font:500 clamp(30px,2.45vw,36px)/1.13 var(--sans);letter-spacing:-.5px}
#one-lens .one-lens-deck{margin:22px 0 0;color:var(--ink-2);font:400 12px/1.5 var(--mono);letter-spacing:.04em}
/* Explicit areas fill all 144 cells -- every card's own grid-area meets
   its neighbours' exactly at the shared grid line, so a gap here only
   ever inserts a uniform gutter between cards, it can never open a hole
   (no cell is ever left unassigned) or break the outer rectangle (every
   edge card still starts/ends at row/column 1 or 13, flush with the
   grid's own outer edge; gap never applies outside the outermost lines).
   Section D (FOVEA REGROUPED BRIEF): "slight, uniform gaps... one solid
   overall rectangular shape" -- 3px reads as a hairline seam between
   stills, not a layout with visible gutters, keeping the "one editorial
   spread" read the brief itself confirmed already works. */
#one-lens .one-lens-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));gap:3px;aspect-ratio:1;overflow:hidden}
#one-lens .one-lens-card{position:relative;isolation:isolate;min-width:0;min-height:0;overflow:hidden;border:0;border-radius:0;background:var(--bg-2);box-shadow:none;aspect-ratio:auto;
  transform:translateY(0);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
/* N10 item 3 (POLISH-NOTES 37): superseding item 15's own scale-based
   lift (this file's earlier comment above explained why: only a 3px
   hairline gap between tiles, so a literal translateY risked overlapping
   the row above). translateY(-2px) is small enough that it doesn't --
   z-index still bumped so the lifted tile draws over its neighbour
   rather than under it if the two pixels do brush against it, checked
   by screenshot after this change, not assumed safe just because the
   number is smaller than the -6/-7px the other three surfaces use. Same
   law as .pitch-card/.rl/.lens-card now: translateY(-2px), the edge
   brightening 8%, 220ms ease-out. */
#one-lens .one-lens-card:hover{transform:translateY(-2px);z-index:5;box-shadow:inset 0 0 0 1px rgba(244,244,242,.2)}
@media(hover:none){#one-lens .one-lens-card:hover{transform:translateY(0);box-shadow:none}}
#one-lens .one-lens-card:nth-child(1){grid-area:1/1/5/7;aspect-ratio:6/4}
#one-lens .one-lens-card:nth-child(2){grid-area:1/7/5/10;aspect-ratio:3/4}
#one-lens .one-lens-card:nth-child(3){grid-area:1/10/5/13;aspect-ratio:3/4}
#one-lens .one-lens-card:nth-child(4){grid-area:5/1/9/5;aspect-ratio:1}
#one-lens .one-lens-card:nth-child(5){grid-area:5/5/9/13;aspect-ratio:2}
#one-lens .one-lens-card:nth-child(6){grid-area:9/1/13/5;aspect-ratio:1}
#one-lens .one-lens-card:nth-child(7){grid-area:9/5/13/9;aspect-ratio:1}
#one-lens .one-lens-card:nth-child(8){grid-area:9/9/13/13;aspect-ratio:1}
/* N10 item 3: 4px of overhang top and bottom at rest, not inset:0 flush,
   so the hover drift below has real headroom to move into -- without
   it, translateY(-4px) on an exactly-100%-height image would pull a
   4px gap open at the bottom (the tile's own background showing
   through), not read as a drift at all. */
#one-lens .one-lens-card img,#one-lens .one-lens-card video{position:absolute;top:-4px;left:0;right:0;display:block;width:100%;height:calc(100% + 8px);object-fit:cover;transition:transform .22s var(--ease)}
#one-lens .one-lens-card:hover img,#one-lens .one-lens-card:hover video{transform:translateY(-4px)}
#one-lens .one-lens-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,var(--bg) 0%,transparent 26%,transparent 74%,var(--bg) 100%);opacity:.58}
#one-lens .one-lens-card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background-image:radial-gradient(circle,var(--ink-3) 1px,transparent 1px);background-size:3px 3px;opacity:var(--one-lens-noise,0)}
#one-lens .one-lens-top{position:absolute;z-index:2;top:clamp(17px,2vw,28px);left:clamp(17px,2vw,28px);right:16px;color:var(--ink)}
#one-lens .one-lens-top h3{margin:0;font:500 clamp(28px,2.25vw,34px)/1.05 var(--sans);letter-spacing:-.03em}
#one-lens .one-lens-top p{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;font:400 12px/1.45 var(--mono);letter-spacing:.02em;color:var(--ink)}
#one-lens .one-lens-state{display:inline-block;padding:5px 8px;border:1px solid var(--glass-line);border-radius:100px;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
#one-lens .is-live .one-lens-state{border-color:var(--accent);background:var(--accent);color:var(--bg)}
#one-lens .one-lens-caption{position:absolute;z-index:2;left:clamp(17px,2vw,28px);right:14px;bottom:clamp(15px,1.8vw,25px);margin:0;color:var(--ink);font:400 12px/1.45 var(--mono);letter-spacing:.02em}
@media(min-width:601px) and (max-width:900px){#one-lens .one-lens-grid{aspect-ratio:auto;grid-template-rows:repeat(4,auto)}#one-lens .one-lens-card:nth-child(n){grid-area:auto;grid-column:span 6;aspect-ratio:4/5}}
@media(max-width:600px){#one-lens{padding:80px 0}#one-lens .one-lens-inner{width:min(100% - 32px,480px)}#one-lens .one-lens-grid{aspect-ratio:auto;grid-template-rows:repeat(8,auto)}#one-lens .one-lens-card:nth-child(n){grid-area:auto;grid-column:span 12;aspect-ratio:4/5}#one-lens .one-lens-head{margin-bottom:32px}#one-lens .one-lens-top{top:18px;left:18px}#one-lens .one-lens-caption{left:18px;bottom:18px}}
@media(prefers-reduced-motion:reduce){#one-lens .one-lens-card{filter:none!important;transform:none!important;--one-lens-noise:0!important}}

/* D4: the Runway card's video is 360:640 (9:16, vertical) -- nowhere
   near this cell's own 1:1 grid-area, and "Frames keep the even
   mosaic" rules out resizing the cell itself to match it. site.css's
   own sitewide video[data-native-aspect] rule sets object-fit:contain,
   but this file's own #one-lens .one-lens-card video rule (line 45,
   same file) is more specific and would still win the position/width/
   height it sets for a normal object-fit:cover fill -- overridden here,
   scoped to the one video that carries the attribute, so every other
   card's img is untouched. margin:auto centers the letterboxed video
   inside the still-square cell instead of stretching or cropping it. */
#one-lens .one-lens-card video[data-native-aspect]{position:absolute;inset:0;margin:auto;top:auto;left:auto;right:auto;width:auto;height:100%}