/* ===== points of light, carried through the public site (js/site-motif.js) ===== */
/* the "keep going" boxes: fine dust behind the words (above the hover fill, below the text) */
.nd-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none}
.lh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.loader.lh-on .loader-pct{color:transparent}

/* ===== Who we are: a black-and-white slideshow filling the right-hand side ===== */
#who{position:relative;overflow:hidden}
.still{margin:0;position:absolute;top:0;right:0;bottom:0;width:44%;background:#0B0B0C}
.still-frame{position:absolute;inset:0;overflow:hidden}
.still-slides{position:absolute;inset:0}
.still-slide{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1.06);filter:grayscale(1) contrast(1.05);transition:opacity 1.3s ease,transform 5s linear}
.still-slide.on{opacity:1;transform:scale(1)}
@media (max-width:900px){.still{position:relative;width:auto;height:auto;aspect-ratio:4/5;margin:40px calc(-1 * var(--gut)) calc(-1 * clamp(90px,11vw,170px))}}

/* ===== the film: full screen, with the title over it ===== */
.film{position:relative;padding:0;background:#0c0c0d}
.film .player{width:100%;max-width:none;height:100vh;height:100svh;aspect-ratio:auto}
.film-over{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1.2fr .8fr;gap:16px 60px;align-items:end;padding-bottom:clamp(36px,6vh,72px);pointer-events:none}
.film-over .lead{color:var(--paper-2);max-width:34ch}
.film.playing .film-over{display:none}
.fp{position:absolute;inset:0;overflow:hidden;background:#050505;cursor:pointer}
.fp-img{position:absolute;inset:-3%;background:url(/img/film-poster.jpg) center 40%/cover no-repeat;filter:grayscale(1) brightness(.6) contrast(1.1) blur(3px);animation:fpZoom 24s ease-in-out infinite alternate}
@keyframes fpZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.fp::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
.fp-play{position:absolute;left:50%;top:46%;z-index:2;width:clamp(84px,9vw,128px);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(243,242,238,.85);background:rgba(10,10,10,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer;transform:translate(-50%,-50%);transition:transform .5s var(--ez),background .4s,border-color .4s}
.fp-play svg{width:34%;fill:#F3F2EE;transform:translateX(8%);transition:fill .4s}
.fp-play::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid rgba(243,242,238,.5);animation:fpPulse 2.6s cubic-bezier(.2,.7,.1,1) infinite}
@keyframes fpPulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}
.fp:hover .fp-play,.fp-play:focus-visible{transform:translate(-50%,-50%) scale(1.08);background:#F3F2EE;border-color:#F3F2EE}
.fp:hover .fp-play svg,.fp-play:focus-visible svg{fill:#0B0B0C}
.fp-bar{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(14px,2.4vh,24px);height:2px;z-index:2;background:rgba(243,242,238,.18);overflow:hidden}
.fp-buf{position:absolute;inset:0 auto 0 0;width:30%;background:linear-gradient(90deg,transparent,rgba(243,242,238,.55),transparent);animation:fpBuf 2.4s ease-in-out infinite}
.fp-head{position:absolute;left:0;top:0;bottom:0;width:0;background:#F3F2EE}
@keyframes fpBuf{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.fp.nudge .fp-play{animation:fpNudge .5s ease}
@keyframes fpNudge{0%,100%{transform:translate(-50%,-50%)}30%{transform:translate(-50%,-50%) scale(.92)}60%{transform:translate(-50%,-50%) scale(1.06)}}
.film-t{display:grid;gap:clamp(14px,1.6vw,22px);justify-items:start}
.fp-og{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;background:#F3F2EE;color:#0B0B0C;font:600 14px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;border-radius:2px}
.fp-og svg{width:22px;height:21px}
.film-over{z-index:2;padding-bottom:clamp(48px,8vh,96px)}
@media (prefers-reduced-motion:reduce){.fp-play::before,.fp-buf,.fp-img{animation:none}}
@media (max-width:760px){.film-over{grid-template-columns:1fr}.fp-play{width:76px}}

/* ===== header: three links, and a quieter Sign in beside a solid Join ===== */
.nav-links{gap:clamp(22px,3vw,44px);font-size:14px;letter-spacing:.01em}
.nav-cta{gap:clamp(14px,1.6vw,22px)}
.nv-in{background:none;border:0;padding:6px 0;color:inherit;font:500 14px/1 var(--f-body);cursor:pointer;position:relative}
.nv-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ez)}
.nv-in:hover::after,.nv-in:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nv-join{position:relative;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 8px 0 18px;background:#fff;color:#000;border:0;font:600 14px/1 var(--f-body);letter-spacing:.01em;cursor:pointer;overflow:hidden;transition:padding .45s var(--ez)}
.nv-a{position:relative;display:grid;place-items:center;width:26px;height:26px;background:#000;color:#fff;overflow:hidden}
.nv-a i{font-style:normal;grid-area:1/1;transition:transform .45s var(--ez)}
.nv-a i:last-child{transform:translateX(-160%)}
.nv-join:hover .nv-a i:first-child,.nv-join:focus-visible .nv-a i:first-child{transform:translateX(160%)}
.nv-join:hover .nv-a i:last-child,.nv-join:focus-visible .nv-a i:last-child{transform:none}
.nv-join:hover,.nv-join:focus-visible{padding-left:22px}
.nv-join:focus-visible,.nv-in:focus-visible{outline:1.5px solid #fff;outline-offset:4px}

/* ===== pitch it, then vote: compact ===== */
.what{padding-block:clamp(64px,7vw,110px) 0}
.reel{height:auto!important}
.reel-sticky{position:relative;height:auto;padding-block:clamp(28px,3vw,44px) clamp(24px,2.4vw,36px);gap:0}
.reel-head,.reel-bar{display:none}
.reel-track{transform:none!important;width:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-inline:var(--gut)}
.reel-end{display:none}
.frame{width:auto;padding:30px 18px 26px;border-right:0}
.frame::before{top:10px}.frame::after{bottom:10px}
.frame-pic{margin-block:10px 14px;aspect-ratio:16/9}
.frame h3{font-size:clamp(30px,2.6vw,44px);margin-bottom:8px}
.frame p{font-size:14px}
.frame-last .big{font-size:clamp(30px,2.6vw,46px);margin-top:12px}
@media (max-width:980px){.reel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin-inline:0;padding-bottom:6px;scrollbar-width:none}.reel-track::-webkit-scrollbar{display:none}.frame{flex:none;width:min(78vw,340px);scroll-snap-align:start}}

/* ===== the collective's choice: compact, image-led, one full-width row ===== */
.work{padding-block:clamp(40px,3.6vw,60px) 0}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 40px;flex-wrap:wrap;margin-bottom:clamp(14px,1.6vw,22px)}
.work-head .h2{margin:0;font-size:clamp(40px,4.6vw,76px)}
.work-sub{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--paper-2);max-width:60ch}
.work-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.work-all{white-space:nowrap}
.cards{display:grid;grid-template-columns:1.7fr repeat(4,1fr);grid-auto-rows:clamp(380px,min(36vw,80vh),740px);gap:4px;overflow:visible;padding:0;scroll-snap-type:none;width:100%;margin:0}
.cards[data-n="4"]{grid-template-columns:1.7fr repeat(3,1fr)}
.cards[data-n="3"]{grid-template-columns:1.7fr repeat(2,1fr)}
.cards[data-n="2"]{grid-template-columns:1.7fr 1fr}
.cards[data-n="1"]{grid-template-columns:1fr}
.cards{position:relative}
.cards[data-n="hold"]{gap:1px;background:rgba(243,242,238,.9);border-block:1px solid rgba(243,242,238,.9)}
.card.ghost{background:#0a0a0a;overflow:hidden;animation:none}
.card.ghost .g-n{position:absolute;top:clamp(14px,1.3vw,20px);left:clamp(14px,1.3vw,20px);font:500 11px var(--f-mono);letter-spacing:.12em;color:rgba(243,242,238,.34)}
.hold{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:var(--gut);pointer-events:none}
.hold-box{pointer-events:auto;position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:clamp(30px,3.4vw,54px) clamp(34px,4.6vw,78px);max-width:min(660px,100%);border-radius:28px;isolation:isolate;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.09) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.08);backdrop-filter:blur(14px) saturate(1.8) brightness(1.08);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.14),inset 1px 0 0 rgba(255,255,255,.18),inset -1px 0 0 rgba(255,255,255,.08),inset 0 0 28px rgba(255,255,255,.06),0 30px 80px -24px rgba(0,0,0,.85);
  animation:cardIn .9s var(--ez) .15s both}
.hold-box::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at 18% -10%,rgba(255,255,255,.28),transparent 46%),radial-gradient(90% 60% at 100% 120%,rgba(255,255,255,.12),transparent 50%)}
.hold-box::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);transform:skewX(-18deg);animation:glassSheen 7s ease-in-out 1.2s infinite}
@keyframes glassSheen{0%,70%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.hold-box::after{animation:none;display:none}}
.hold-t{margin:0;font-family:var(--f-display);font-stretch:75%;font-weight:700;font-size:clamp(40px,4.6vw,80px);line-height:.9;letter-spacing:-.035em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hold-s{margin:6px 0 0;font-size:clamp(15px,1.2vw,19px);color:rgba(255,255,255,.86)}
.hold-cta{margin-top:12px;background:none;border:0;padding:0 0 4px;color:#fff;font:500 15px var(--f-body);cursor:pointer;border-bottom:1px solid currentColor}
.hold-cta span{display:inline-block;transition:transform .4s var(--ez)}
.hold-cta:hover span{transform:translateX(5px)}
.card{flex:none;display:block;position:relative;min-width:0;animation:cardIn .8s var(--ez) both}
.card .poster{position:absolute;inset:0;aspect-ratio:auto;height:100%;padding:clamp(14px,1.3vw,20px);isolation:isolate}
.poster .p-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1) contrast(1.06) brightness(.74);transform:scale(1.02);transition:transform 1.4s var(--ez),filter .8s var(--ez)}
.poster.pic::after{z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.42) 0,transparent 26%,transparent 46%,rgba(0,0,0,.84) 100%);transform:none!important}
.poster.pic:hover .p-img,.poster.pic:focus-visible .p-img{transform:scale(1.07);filter:grayscale(1) contrast(1.08) brightness(.9)}
.poster .p-top{color:rgba(243,242,238,.72);gap:12px}
.poster .p-credit i{font-style:normal;color:rgba(243,242,238,.42)}
.poster .p-credit i::before{content:"·";margin-inline:.7em}
.poster.v2 .p-credit,.poster.v2 .p-credit i{color:var(--mute-2)}
.poster .p-bot{display:flex;flex-direction:column;gap:6px;min-width:0}
.card .poster .p-title{font-size:clamp(24px,2.1vw,38px);line-height:.9}
.card.lead-card .poster .p-title{font-size:clamp(40px,4vw,72px)}
.poster .p-tag{margin:0;font-size:13.5px;line-height:1.35;color:rgba(243,242,238,.82);max-width:46ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card:not(.lead-card) .poster .p-tag{display:none}
.poster .p-credit{font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(243,242,238,.62);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .vote{position:absolute;top:clamp(10px,1vw,14px);right:clamp(10px,1vw,14px);z-index:2;background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:820px){
  .work-head{flex-direction:column;align-items:flex-start}
  .cards,.cards[data-n]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-inline:var(--gut);scrollbar-width:none;gap:6px}
  .cards::-webkit-scrollbar{display:none}
  .card,.card.lead-card{flex:0 0 min(84vw,380px);aspect-ratio:4/5.4;scroll-snap-align:start}
  .card .poster .p-title,.card.lead-card .poster .p-title{font-size:clamp(30px,8vw,40px)}
  .card:not(.lead-card) .poster .p-tag{display:-webkit-box}
  .work{padding-bottom:0}
  .work-ctl{width:100%}
  .cards[data-n="hold"]{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;overflow:visible;gap:1px;padding-inline:0;padding-bottom:0}
  .cards[data-n="hold"] .card{flex:none;aspect-ratio:1/1}
  .cards[data-n="hold"] .card:nth-child(5){display:none}
  .hold-t{font-size:clamp(36px,10vw,48px)}
  .hold-box{border-radius:22px;padding:26px 24px}
  .work-all{width:100%;justify-content:center}
  .cards,.cards[data-n]{padding-bottom:var(--gut)}
}