/* ==========================================================================
   Misideal — work page (no window frame: nav + footer sit fixed over a
   normal full-width scrolling page)
   ========================================================================== */

body{background:#141414;}

.wrap{max-width:1400px;margin:0 auto;padding:0 30px;}

.work-head{
  padding:130px 0 26px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.work-head h1{font-family:var(--sans);font-weight:700;
  text-transform:uppercase;
  font-size:clamp(30px,5vw,60px);letter-spacing:-.03em;}

.fgroup{display:flex;gap:6px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.07);backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);flex-wrap:wrap;}
.fgroup button{background:none;border:0;color:var(--bone);font:inherit;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s;}
.fgroup button[aria-pressed=true]{background:var(--bone);color:#0A0A0A;}

.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding-bottom:120px;}
@media(max-width:980px){.wgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.wgrid{grid-template-columns:1fr;}}

.wtile{display:block;}
.wtile .ph{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111;}
.wtile .ph img,.wtile .ph video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform 1s cubic-bezier(.15,.7,.25,1);}
.wtile:hover .ph img,.wtile:hover .ph video{transform:scale(1.05);}
.wtile .ph .dk{position:absolute;inset:0;background:rgba(0,0,0,.28);
  opacity:0;transition:opacity .4s;}
.wtile:hover .ph .dk{opacity:1;}
/* touch fallback: no hover on mobile, so eyebrow + title sit statically
   over the thumbnail itself instead, contained within its own bounds */
.wtile .info{display:none;position:absolute;inset:0;z-index:5;padding:14px;
  flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.82) 100%);}
.wtile .info .eb{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.8;margin-bottom:4px;}
.wtile .info .tt{font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:16px;letter-spacing:-.02em;line-height:1.15;}
@media(hover:none){.wtile .info{display:flex;}}

/* smaller hover-cursor title — shared by the Work page and Director pages,
   the two pages that use .wgrid/.wtile tiles */
body.tiles-page .cursorlbl .tt{font-size:clamp(18px,2.4vw,32px);}