/* =====================================================================================
   v3 THE WALL (2026-09-19). Measured off the client's own references with tools/fingerprint.js
   at 1440: Radical Media /work = 0 side margin, 0 gutter, 3 equal tiles, title ON the image.
   Slick Films = 0 gutter key-art panels. NEON = 4px gutter, film title on the still at 160px.
   Highdive = 39 full-bleed stills stacked with a 0 row gap.
   v2 measured 17px gutters, 49px margins, 256px row gaps: cards on paper, not a wall.
   Base cell here is square (100vw / 12), so every span lands flush and nothing floats.
   ===================================================================================== */
.wall2 { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: calc(100vw / 12); gap: 0; background: var(--stage); }
.cell { position: relative; display: block; overflow: hidden; margin: 0; background: var(--stage-2); color: var(--on-stage); grid-column: span var(--c); grid-row: span var(--r); }
.cell > img, .cell > video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.8s var(--ease-expressive); }
.cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 10, 13, .34) 0%, rgba(11, 10, 13, 0) 26%, rgba(11, 10, 13, 0) 44%, rgba(11, 10, 13, .88) 100%); }
@media (hover: hover) { a.cell:hover > img, a.cell:hover > video { transform: scale(1.045); } a.cell:hover .cell__cap b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; } }

/* the title sits ON the picture and scales with the cell, the way the references set it */
.cell__cap { position: absolute; z-index: 2; left: clamp(14px, 1.5vw, 28px); right: clamp(14px, 1.5vw, 28px); bottom: clamp(12px, 1.3vw, 24px); display: grid; gap: .25em; }
.cell__cap b { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; line-height: .86; font-size: clamp(1.7rem, calc(var(--c) * 0.52vw), 7rem); text-wrap: balance; }
.cell__cap span { font-family: var(--f-mono); font-size: clamp(.58rem, .72vw, .76rem); letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 238, 230, .78); }
.cell__bug { position: absolute; z-index: 2; right: clamp(14px, 1.5vw, 28px); top: clamp(12px, 1.3vw, 24px); font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 238, 230, .82); text-align: right; max-width: 60%; }
.cell > .status { position: absolute; z-index: 2; left: clamp(14px, 1.5vw, 28px); top: clamp(12px, 1.3vw, 24px); background: rgba(11, 10, 13, .62); border-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .6rem; }
.cell--art > img { object-fit: cover; }
.cell--type { background: radial-gradient(120% 120% at 70% 0%, color-mix(in srgb, var(--accent) 44%, #0B0A0D) 0%, #0B0A0D 74%); }
.cell--type .cell__cap b { color: var(--accent); font-size: clamp(2rem, calc(var(--c) * 0.62vw), 7rem); }
.cell--type::before { content: "Key art to come"; position: absolute; right: clamp(14px, 1.5vw, 28px); top: clamp(12px, 1.3vw, 24px); font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-stage-2); }

/* a proof panel keeps the grid unbroken where there is no picture worth showing */
.cell--say { background: var(--stage); display: grid; align-content: end; padding: clamp(20px, 2.2vw, 40px); }
.cell--say::after { display: none; }
.cell--say .cell__say { display: grid; gap: .5em; }
.cell--say .slug { color: var(--on-stage-2); font-size: .6rem; }
.cell--say b { font-family: var(--f-cine); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; line-height: .9; font-size: clamp(1.7rem, calc(var(--c) * 0.5vw), 4rem); text-wrap: balance; }
.cell--say .p { color: var(--on-stage-2); font-size: clamp(.84rem, .95vw, 1rem); line-height: 1.42; }
@media (hover: hover) { a.cell--say:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; } }

/* phones: one column, full bleed, stacked with no gap at all (Highdive) */
@media (max-width: 860px) {
  .wall2 { grid-template-columns: repeat(6, 1fr); grid-auto-rows: calc(100vw / 6); }
  .cell { grid-column: span 6; grid-row: span var(--rm); }
  .cell__cap b { font-size: clamp(2rem, 8.5vw, 3.6rem); }
  .cell--say b { font-size: clamp(1.8rem, 7vw, 3rem); }
  .cell--type .cell__cap b { font-size: clamp(2.4rem, 11vw, 4.4rem); }
}

/* the reel lands in a cell of the wall, so the dock ends where the wall begins */
.dock__side .cell { aspect-ratio: 12 / 7; grid-column: auto; grid-row: auto; }
.dock__dest { row-gap: clamp(14px, 2vh, 26px); }

/* section heads sit inside the dark, and the poster wall and faces lose their gutters too */
.wallhead { padding: clamp(60px, 8vw, 150px) var(--margin) clamp(22px, 2.6vw, 40px); display: grid; gap: clamp(14px, 1.6vw, 24px); justify-items: start; }
.wallhead .h1 { line-height: .86; }
.wallhead .lead { color: var(--on-stage-2); max-width: 44ch; }
.stage > .wall { gap: 0; margin: 0; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 12.5vw, 240px), 1fr)); }
.stage > .wall .cover { border-radius: 0; }
.stage > .readout { padding-inline: var(--margin); padding-bottom: clamp(48px, 6vw, 96px); border: 0; }
.faces { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; cursor: grab; padding-bottom: clamp(48px, 6vw, 96px); }
.faces::-webkit-scrollbar { display: none; }
.faces.is-drag { cursor: grabbing; }
.faces > figure { flex: 0 0 clamp(150px, 12.5vw, 220px); position: relative; }
.faces .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stage-2); }
.faces .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.06); transition: filter .5s var(--ease-productive); user-select: none; pointer-events: none; }
@media (hover: hover) { .faces figure:hover .ph img { filter: none; } }
@media (hover: none) { .faces .ph img { filter: none; } }
.faces figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
@media (max-width: 860px) { .faces > figure { flex-basis: 44vw; } }

/* bands butt straight onto the wall, no seam */
.band--flush { min-height: 92svh; }
.band--flush + .band--flush { border-top: 1px solid rgba(242, 238, 230, .1); }
html.shot .band--flush { min-height: 880px !important; }

/* the dock hands over to the wall: dark all the way, no white flash between them */
.dock__dest { color: var(--on-stage); }
html:not(.can-dock) .dock__dest { background: var(--stage); }
.dock__dest .dock__dest-head .h2 { color: var(--on-stage); }
.dock__dest .btn { border-color: var(--rule-stage); }
@media (hover: hover) { .dock__dest .btn:hover { background: var(--on-stage); color: var(--stage); border-color: var(--on-stage); } }

/* the poster wall runs edge to edge like Radical Media's work index: fixed columns so the rows
   stay even, and the final cover stretches into whatever is left so the wall never ends in a hole */
.stage > .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stage > .wall .cover:last-child { grid-column-end: -1; aspect-ratio: auto; }
.stage > .wall .cover:last-child.cover--type::before { right: 14px; left: auto; width: 46px; }
.stage > .tools { padding-inline: var(--margin); margin-top: 0; }
.stage > .rows { padding-inline: var(--margin); padding-bottom: clamp(48px, 6vw, 96px); }
@media (max-width: 1100px) { .stage > .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .stage > .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-slate] .wallhead { padding-top: calc(var(--header-h) + clamp(48px, 9vw, 150px)); }
[data-slate] .wallhead .lead { max-width: 40ch; }

/* v4: every page opens on a full-height frame, and the closing frame repeats sitewide */
.band--tall { min-height: 100svh; align-items: end; }
.band--tall .band__in { padding-bottom: clamp(40px, 7vh, 96px); }
.band--tall .hero-t { font-size: var(--t-hero); max-width: 16ch; }
.band--tall .lead { max-width: 46ch; }
html.shot .band--tall { min-height: 900px !important; }
.band--tall .record__grid { border-top-color: rgba(242, 238, 230, .28); max-width: 1100px; }
.band--tall .record__cell b { font-size: clamp(3rem, 7vw, 7rem); }
.closer2 { padding: clamp(80px, 12vw, 200px) var(--margin) clamp(80px, 12vw, 190px); display: grid; gap: clamp(18px, 2vw, 30px); border-top: 1px solid var(--rule-stage); }
.closer2 .hero-t { font-size: var(--t-h1); max-width: 17ch; }
.closer2 .muted { color: var(--on-stage-2); }
.wallpad { height: clamp(48px, 6vw, 96px); }
.stage > .wrap .record__grid { border-top-color: var(--rule-stage); }

/* the work index keeps its sticky filter bar flush to the wall */
[data-slate] .tools { margin-top: 0; padding-inline: var(--margin); }
[data-slate] .rows { padding-inline: var(--margin); }

/* gallery walls on film pages sit straight under the body copy with no seam */
.wall2 + .wall2 { border-top: 1px solid rgba(242, 238, 230, .08); }

/* pitch pages keep their own brand voice inside the wall */
body.wtd .cell__cap b, body.wynx .cell__cap b, body.woo .cell__cap b { font-family: inherit; font-weight: 600; text-transform: none; letter-spacing: -.02em; line-height: 1.04; font-size: clamp(1.25rem, calc(var(--c) * 0.30vw), 2.6rem); }
body.wtd .cell__cap span, body.wynx .cell__cap span, body.woo .cell__cap span { font-family: var(--f-mono, ui-monospace); }