/* ══════════════════════════════════════════════════════════════════
   PONZI — THE COLLECTION (shared across all three directions)

   A zero-gutter 12-column lattice at three render scales, so the uniform
   squares fuse into one continuous wall rather than reading as fifty
   separate pictures. Two categories: Stills and Motion — and the fourteen
   works that have a loop play it in place on hover, so the distinction is
   real rather than a label.

   Themed per direction purely through the tokens in shared/base.css
   plus each direction's own type variables.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --a-pad: clamp(1.15rem, 4vw, 2.75rem);
  --a-maxw: 1400px;
  --ease-out: cubic-bezier(.23,1,.32,1);
}

body{ overflow-x:clip }

/* ── masthead ─────────────────────────────────────────────────────
   difference blend so the lime chrome inverts over any plate beneath
   it without needing a scrim — the Studio Freight move. */
.amast{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  height:64px; padding-inline:var(--a-pad);
  background:var(--ink);
  border-bottom:1px solid var(--hair);
}
.amast-mark{ display:flex; align-items:center; min-height:44px }
.amast-mark img{ height:24px; width:auto }
.amast-nav{ display:flex; gap:1.5rem; margin-inline-start:auto; font-size:.86rem }
.amast-nav a{ color:var(--bone-2); transition:color .18s var(--ease-out);
  display:flex; align-items:center; min-height:44px }
.amast-nav a:hover,.amast-nav a[aria-current]{ color:var(--lime) }
.amast-nav sup{ font-size:.72em; padding-inline-start:.18em; opacity:1 }

/* ── hero ─────────────────────────────────────────────────────────── */
.art-hero{
  max-width:var(--a-maxw); margin-inline:auto;
  padding:clamp(3rem,8vw,6.5rem) var(--a-pad) clamp(2rem,4vw,3rem);
}
.art-eyebrow{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lime); margin:0 0 1.2rem;
}
.art-h1{
  font-family:var(--serif,var(--disp,inherit));
  font-size:clamp(2.8rem,9vw,7.5rem); line-height:.96; letter-spacing:-.03em;
  font-weight:var(--art-h1-weight,300); margin:0;
}
.art-h1 sup{ font-size:.24em; vertical-align:super; letter-spacing:0; opacity:.55; padding-inline-start:.1em }
.art-lede{
  margin:1.6rem 0 0; max-width:56ch; color:var(--bone-2);
  font-size:clamp(1rem,1.5vw,1.12rem);
}

/* ── controls ─────────────────────────────────────────────────────── */
.controls{
  position:sticky; top:64px; z-index:40;
  max-width:var(--a-maxw); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem clamp(1rem,2.5vw,2.2rem);
  padding:.85rem var(--a-pad);
  background:color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter:blur(10px);
  border-block:1px solid var(--hair);
}
.ctl{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap }
.ctl-cat button{ font-size:.82rem; padding:.55em 1.05em }
.ctl-k{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-3); margin-inline-end:.35rem;
}
.ctl button{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.02em;
  color:var(--bone-2); padding:.5em .85em; border-radius:var(--r-chip);
  border:1px solid transparent; min-height:34px;
  transition:color .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.ctl button sup{ font-size:.82em; opacity:1; padding-inline-start:.25em }
.ctl button:hover{ color:var(--bone) }
.ctl button[aria-pressed="true"]{ color:var(--ink); background:var(--lime); border-color:var(--lime) }
.ctl-count{
  margin:0 0 0 auto; font-family:var(--mono); font-size:.72rem; color:var(--bone-3);
}
@media (max-width:820px){
  .controls{ position:static; gap:.6rem 1rem }
  .ctl-count{ margin-inline-start:0 }
  .ctl button{ min-height:44px }
}

/* one view only — the Ledger shipped alongside this and was cut */

/* hidden by a filter */
[data-work][hidden]{ display:none !important }

/* ══════════════════ PLATES ══════════════════ */
.plates{ padding-bottom:clamp(3rem,7vw,6rem) }
.plattice{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(12,1fr); gap:0;
  grid-auto-flow:dense; grid-auto-rows:calc(100vw/12);
}
.pcell{ position:relative; overflow:hidden }
.pcell--1{ grid-column:span 2; grid-row:span 2 }
.pcell--2{ grid-column:span 3; grid-row:span 3 }
.pcell--3{ grid-column:span 4; grid-row:span 4 }
.pcell a{ display:block; width:100%; height:100%; position:relative }
.pcell img{ width:100%; height:100%; object-fit:cover; display:block }
.pvid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .32s var(--ease-out); pointer-events:none;
}
.pcell.is-playing .pvid{ opacity:1 }
.pcap{
  position:absolute; inset-inline:0; bottom:0; z-index:2;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bone); padding:.55rem .6rem;
  background:linear-gradient(to top, rgba(6,5,3,.88), transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.pcap b{ color:var(--lime); font-weight:400; padding-inline-end:.4em }
.pmotion{
  position:absolute; top:.5rem; inset-inline-start:.5rem; z-index:2;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lime); background:color-mix(in srgb,var(--ink) 74%,transparent);
  border:1px solid var(--hair-2); border-radius:var(--r-chip); padding:.18em .42em;
}
@media (hover:hover) and (pointer:fine){
  .plattice:has(.pcell a:hover) .pcell:not(:hover) img{ opacity:.34 }
  .pcell img{ transition:opacity .25s var(--ease-out) }
  .pcell a:hover .pcap{ opacity:1; transform:none }
}
.pcell a:focus-visible .pcap{ opacity:1; transform:none }

@media (max-width:900px){
  .plattice{ grid-template-columns:repeat(6,1fr); grid-auto-rows:calc(100vw/6) }
  .pcell--1{ grid-column:span 2; grid-row:span 2 }
  .pcell--2{ grid-column:span 3; grid-row:span 3 }
  .pcell--3{ grid-column:span 6; grid-row:span 6 }
  .pcap{ opacity:1; transform:none; font-size:.6rem }
}

.art-foot{
  max-width:var(--a-maxw); margin:0 auto; padding:0 var(--a-pad) clamp(4rem,8vw,7rem);
  font-family:var(--mono); font-size:.78rem; color:var(--bone-3); max-width:64ch;
}

/* ══════════════════ ONE EXHIBIT ══════════════════ */
.work{
  max-width:var(--a-maxw); margin-inline:auto;
  padding:clamp(2rem,5vw,4rem) var(--a-pad) clamp(2rem,4vw,3rem);
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}
.work-fig{ margin:0 }
.work-frame{ border:1px solid var(--hair); border-radius:var(--r-card); overflow:hidden; background:var(--ink-2) }
.work-frame img{ width:100%; height:auto; display:block }
.work-motion{
  margin-top:1rem; display:flex; align-items:center; gap:.9rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-3);
}
.work-motion video{ width:132px; height:auto; border:1px solid var(--hair); border-radius:var(--r-chip) }

.work-no{ font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); margin:0 0 1rem }
.work-no span{ color:var(--bone-3) }
.work-t{
  font-family:var(--serif,var(--disp,inherit)); font-weight:var(--art-h1-weight,300);
  font-size:clamp(2rem,4vw,3.2rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 1rem;
}
.work-c{ color:var(--bone-2); font-size:1.05rem; margin:0 0 2rem; max-width:38ch }
.work-facts{ margin:0 0 2rem; border-top:1px solid var(--hair) }
.work-facts > div{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--hair) }
.work-facts dt{ font-size:.88rem; color:var(--bone-2) }
.work-facts dd{ margin:0; font-family:var(--mono); font-size:.82rem }
.work-facts .nil{ color:var(--red) }
.work-back{ font-family:var(--mono); font-size:.8rem; color:var(--lime);
  display:inline-flex; align-items:center; min-height:44px }
.work-back:hover{ text-decoration:underline; text-underline-offset:.3em }

.work-nav{
  max-width:var(--a-maxw); margin-inline:auto;
  padding:0 var(--a-pad) clamp(3rem,7vw,6rem);
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.wn{ display:grid; gap:.3rem; padding:1.1rem 0; border-top:1px solid var(--hair-2); min-height:44px }
.wn-next{ text-align:end }
.wn-k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3) }
.wn-t{ font-size:1rem; color:var(--bone); transition:color .18s var(--ease-out) }
.wn:hover .wn-t{ color:var(--lime) }

@media (max-width:900px){
  .work{ grid-template-columns:1fr }
  .work-nav{ grid-template-columns:1fr }
  .wn-next{ text-align:start }
}

/* motion is opt-in, per prefers-reduced-motion done properly:
   reduce keeps a gentle opacity change and drops every transform */
@media (prefers-reduced-motion:reduce){
  .pcap{ transition:none }
}