/* WORK index. PNE dark ground, Inter Tight, brand-coloured tiles. No glass, no mono labels, no brackets. */
html{background:#050605}
body[data-page=work]{background:#050605;color:#EEF1EF}
#dust{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
main.wx{pointer-events:auto;position:relative;z-index:2;color:#EEF1EF;--pad:clamp(1.2rem,4vw,4.5rem)}
.wx a,.wx button{cursor:none}
.wx img{display:block;max-width:100%}

.wk-hero{max-width:1560px;margin:0 auto;padding:clamp(9rem,24vh,15rem) var(--pad) clamp(4rem,9vh,6rem)}
.wk-h{font-weight:500;font-size:clamp(3.2rem,8vw,8.4rem);line-height:.92;letter-spacing:-.055em}
.wk-h .ln{display:block;overflow:hidden;padding:0 .04em .08em;margin:0 -.04em -.08em}
.wk-h .ln>span{display:inline-block}
.wk-hf{display:flex;justify-content:space-between;align-items:flex-end;gap:2.4rem 4rem;flex-wrap:wrap;margin-top:2.8rem}
.wk-lede{max-width:34rem;color:#A9B0AC;font-size:clamp(1.05rem,1.2vw,1.2rem);line-height:1.5}
.wk-fl{display:flex;gap:.4rem;flex-wrap:wrap}
.wk-fl button{font:500 .95rem var(--d);color:#EEF1EF;background:none;border:1px solid rgba(238,241,239,.18);border-radius:99px;padding:.65rem 1.15rem;transition:background .5s var(--e),color .5s var(--e),border-color .5s}
.wk-fl button:hover{border-color:#EEF1EF}
.wk-fl button.on{background:#EEF1EF;color:#050605;border-color:#EEF1EF}
.wk-fl sup{font-size:.7em;margin-left:.2em;color:inherit;opacity:.6;vertical-align:.4em}

.wk-list{max-width:1560px;margin:0 auto;padding:0 var(--pad) clamp(8rem,18vh,12rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.6rem);row-gap:clamp(4.5rem,11vh,8rem);align-items:start}
.wt{grid-column:span 12;min-width:0}
.wt.w7{grid-column:span 7}.wt.w5{grid-column:span 5}
.wt.dn{margin-top:clamp(5rem,14vh,10rem)}
.wt.off{display:none}
.wt a{display:block}

/* the art */
.wt-art{position:relative;overflow:hidden;border-radius:6px;background:var(--tb);color:var(--ti);aspect-ratio:2.15/1;isolation:isolate;container-type:inline-size}
.wt.w7 .wt-art{aspect-ratio:4/3}
.wt.w5 .wt-art{aspect-ratio:4/5}
.wt-art img{width:100%;height:100%;object-fit:cover}
.wt-g{position:absolute;inset:0;padding:5.5cqw;display:flex;flex-direction:column;justify-content:space-between;z-index:2;pointer-events:none}
.wt-lg{height:clamp(1.4rem,4.2cqw,3rem);display:flex;align-items:center}
.wt-li{height:100%!important;width:auto!important;object-fit:contain!important}
.wt-lm{display:block;height:100%;aspect-ratio:4.4;-webkit-mask:var(--lg) no-repeat left center/contain;mask:var(--lg) no-repeat left center/contain;background:currentColor}
.b-he .wt-lm{aspect-ratio:.62}
.wt-lt{font-family:var(--fd);font-stretch:var(--dstretch);text-transform:uppercase;font-size:clamp(.9rem,3cqw,1.6rem);letter-spacing:.04em;white-space:nowrap}
.wt-line{font-family:var(--fd);text-transform:var(--dcase);font-weight:var(--dw);letter-spacing:var(--dt);line-height:var(--dl);font-stretch:var(--dstretch);font-size:calc(5.2cqw * var(--ds));max-width:11ch}
.wt-line em{font-style:normal;color:var(--emc);font-family:var(--emf)}
.wt-line i{display:block;font-family:var(--fs);font-style:normal;text-transform:none;letter-spacing:0;font-size:1.25em;line-height:.9;margin-left:.8em}
.b-wg .wt-line em{color:transparent;-webkit-text-stroke:1.5px var(--ti)}
.b-de .wt-line em{color:inherit;font-style:italic}
.b-ma .wt-line em{font-style:italic}
.b-dc .wt-line em{display:block}
.b-ou .wt-line em{display:block;font-size:.5em;margin-top:.5em;text-transform:none;font-weight:400;color:var(--emc)}
.wt-ph{position:absolute;top:0;bottom:0;right:0;width:50%;overflow:hidden}
.wt-ph img{height:112%;margin-top:-6%;transition:transform 1.6s var(--e)}
.wt-d{position:absolute;aspect-ratio:1440/900;border-radius:clamp(4px,.9cqw,10px);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.08);transition:transform 1.4s var(--e);display:none}
.wt-d img{object-position:top}
.wt-p{position:absolute;left:50%;bottom:-9%;width:13%;margin-left:-6.5%;aspect-ratio:390/844;border-radius:clamp(8px,2.2cqw,24px);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.1);z-index:3;transition:transform 1.4s var(--e)}
.wt-p img{object-position:top}
.wt-p.rd{border-radius:0;box-shadow:none;overflow:visible;aspect-ratio:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.wt-p.rd img{height:auto}
/* full: brand ground and type on the left, photography on the right, the phone on the seam */
.wt.full .wt-g{right:50%}
.wt.full .wt-line{font-size:calc(6.4cqw * var(--ds))}
/* wide: the brand's ground and line, its site rising out of the bottom */
.wt.w7 .wt-ph,.wt.w7 .wt-p{display:none}
.wt.w7 .wt-g{justify-content:flex-start;gap:4cqw}
.wt.w7 .wt-line{font-size:calc(6.4cqw * var(--ds))}
.wt.w7 .wt-d{display:block;width:74%;right:-6%;bottom:-12%}
/* narrow: the photograph is the ground, the phone carries the site */
.wt.w5 .wt-ph{width:100%}
.wt.w5 .wt-ph:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 34%)}
.wt.w5 .wt-line{display:none}
.wt.w5 .wt-g{color:#fff}
.wt.w5 .wt-p{left:auto;right:7%;margin:0;width:34%;bottom:-7%}
.wt.w5 .wt-p.rd{width:44%;bottom:-14%}
/* standard: the site itself */
.wt-art.st .wt-d{display:block;inset:7% 7% -8% 7%;width:auto;aspect-ratio:auto}
.wt.w5 .wt-art.st .wt-d{inset:9% -50% 16% 9%}
.wt-art.st .wt-p{left:auto;right:6%;margin:0;width:15%}
.wt.w5 .wt-art.st .wt-p{width:30%;right:8%}
.wt-art.st:before{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 30% 100%,var(--ac),transparent 70%);opacity:.35}

.wt a:hover .wt-d{transform:translateY(-2.5%)}
.wt a:hover .wt-p{transform:translateY(-5%) rotate(-1deg)}
.wt a:hover .wt-ph img{transform:scale(1.05)}

/* the words */
.wt-i{display:flex;justify-content:space-between;align-items:baseline;gap:1.6rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(238,241,239,.14)}
.wt-i h2{font-weight:500;font-size:clamp(1.6rem,2.3vw,2.4rem);letter-spacing:-.04em;line-height:1;transition:color .5s}
.wt-i span{color:#8E9590;font-size:.95rem;white-space:nowrap}
.wt-t{color:#A9B0AC;font-size:1rem;line-height:1.45;max-width:36rem;margin-top:.7rem}
.wt a:hover .wt-i h2{color:#16C47F}

.wx .cta{background:#050605;color:#EEF1EF;min-height:auto;padding:clamp(7rem,20vh,12rem) 2rem clamp(6rem,14vh,9rem);position:relative;z-index:2}
.wx .cta-l{font:500 .95rem var(--d);color:#A9B0AC;margin-bottom:2rem}
.wx .cta-h{font-weight:500;letter-spacing:-.05em;font-size:clamp(3rem,7.4vw,7.6rem)}

@media (max-width:900px){
  .wk-hero{padding-top:8rem}
  .wt.w7,.wt.w5{grid-column:span 12}
  .wt.dn{margin-top:0}
  .wt.full .wt-art{aspect-ratio:4/4.2}
  .wt.full .wt-g{right:0;bottom:46%}
  .wt.full .wt-ph{top:auto;height:50%;width:100%}
  .wt.full .wt-p{left:auto;right:7%;margin:0;width:26%;bottom:-6%}
  .wt.full .wt-line{font-size:calc(9cqw * var(--ds))}
  .wt.w7 .wt-art{aspect-ratio:4/3.6}
  .wt.w7 .wt-line{font-size:calc(9cqw * var(--ds))}
  .wt.w7 .wt-d{width:86%;right:-10%}
  .wt.w5 .wt-art{aspect-ratio:4/4.6}
  .wt-i{flex-direction:column;gap:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .wt-d,.wt-p,.wt-ph img{transition:none}
}
@media (max-width:900px){.wt .wt-art.st .wt-d,.wt.w5 .wt-art.st .wt-d{inset:12% -30% 14% 8%}}
.wt-art.st .wt-d img{object-position:left top}