/* Tokens from the Begad design system */
:root{
  --u:min(1vw,17.6px);   /* 1% of the window width, but never more than 1% of a 1760px window */
  --paper:#ffffff;
  --paper-alt:#f2f2f0;
  --ink:#000000;
  --ink-muted:#595959;
  --line:#e0e0e0;
  --on-ink:#ffffff;
  --spark:#00f10a;       /* reserved: only the close X uses it for now */

  --space-1:8px;
  --space-2:16px;
  --space-3:32px;
  --space-4:64px;
  --radius-pill:999px;
  --stroke:1.5px;
  --logo-size:clamp(27px,calc(5.6 * var(--u)),84px);
  --logo-h:calc(var(--logo-size) * 1.35);
  --bar-h:max(var(--logo-h), 44px);
  --gutter:max(clamp(16px,calc(5 * var(--u)),64px), calc((calc(100 * var(--u)) - 1760px) / 2));   /* side margins; on a very wide screen they grow so the content stays 1760px wide and centred */

  --font:"Poppins","IBM Plex Sans Arabic",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--logo-h) + var(--gutter) + var(--space-3));background:var(--paper)}
html.lock,html.menu-open{overflow:hidden}
body{
  position:relative;   /* the sticker layer is exactly as big as the page, whatever the page does */
  font:400 17px/26px var(--font);
  background:var(--paper);color:var(--ink);
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.foot :focus-visible,.menu :focus-visible{outline-color:var(--on-ink)}

.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:var(--space-2);top:var(--space-2);z-index:50;background:var(--ink);color:var(--on-ink);padding:var(--space-1) var(--space-2)}

h2{font:700 32px/36px var(--font);letter-spacing:-.01em;margin-bottom:var(--space-3)}
.lead{color:var(--ink-muted);margin:calc(var(--space-2) * -1) 0 var(--space-3)}

/* tags and buttons: one shape, one font. White with a black stroke; inverted when selected or hovered */
.btn,.filters button,.pills li,.pill{
  display:inline-block;
  border:var(--stroke) solid var(--ink);border-radius:var(--radius-pill);
  background:var(--paper);color:var(--ink);
  font:400 15px/22px var(--font);
  padding:7px 18px;
}
.btn,.filters button{
  cursor:pointer;
  transition:background .25s,color .25s,transform .3s cubic-bezier(.3,1.5,.5,1);
}
.btn:hover,.filters button:hover,.filters button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.btn:hover,.filters button:hover{transform:translateY(-2px)}

/* header: wordmark top left, burger top right, inverted against what is underneath */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);
  padding:calc(max(4px, var(--gutter) - 13px) + env(safe-area-inset-top,0px)) var(--gutter) 0;
  color:#fff;mix-blend-mode:difference;pointer-events:none;
}
.bar>*{pointer-events:auto}

.logo{
  display:inline-flex;
  font:600 var(--logo-size)/1.35 var(--font);
  letter-spacing:-.04em;
  align-self:flex-start;
  --dtop:.285;   /* how far below the logo box the top of its tallest letter sits, as a fraction of the font size */
  margin-top:calc(14px - var(--logo-size) * var(--dtop));   /* so that top lands where the burger's top bar does (13px into its button, +1px for letter rounding) */
  transform:scale(var(--s,1));transform-origin:0 calc(var(--logo-size) * var(--dtop));   /* grow and shrink around that top edge, so it never moves */
}
.lc{display:inline-block;overflow:hidden;height:1.35em;vertical-align:top;padding:0 .12em;margin:0 -.12em}
.lc>span{
  display:block;position:relative;
  transition:transform .55s cubic-bezier(.7,0,.2,1);
  transition-delay:calc(var(--i) * .045s);
  animation:lrise .9s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i) * .07s);
}
.lc>span::after{content:attr(data-c);position:absolute;left:0;top:100%}
.logo:hover .lc>span,.logo:focus-visible .lc>span{transform:translateY(-100%)}
@keyframes lrise{from{transform:translateY(105%)}}
.logo{transition:opacity .4s}
.foot-in:not(.lock) .logo{opacity:0;pointer-events:none}

.burger{
  position:relative;width:44px;height:44px;flex:none;align-self:flex-start;margin-right:-9px;   /* top bar on the top margin, last bar on the right margin */
  background:none;border:0;color:inherit;cursor:pointer;border-radius:0;
}
.burger span{
  position:absolute;left:9px;width:26px;height:3px;background:currentColor;
  transform-origin:100% 50%;
  transition:transform .4s cubic-bezier(.7,0,.2,1),top .4s cubic-bezier(.7,0,.2,1);
}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:27px}
.burger:hover span:nth-child(1),.burger:hover span:nth-child(3){transform:scaleX(.6)}
.burger[aria-expanded="true"] span{transform-origin:50% 50%}
.burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:scaleX(0)}
.burger[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}

/* menu overlay: reversed ink block */
.menu{
  position:fixed;inset:0;z-index:35;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--gutter) + 110px + env(safe-area-inset-top,0px)) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom,0px));
  background:var(--ink);color:var(--on-ink);overflow:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s;
}
.menu:focus{outline:none}
.menu.open{
  clip-path:inset(0);visibility:visible;
  transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s;
}
.menu-list li{overflow:hidden;line-height:1}
.menu-list a{
  display:inline-block;
  font:400 clamp(40px,min(calc(11 * var(--u)),11.5vh),140px)/1 var(--font);
  letter-spacing:-.02em;text-transform:uppercase;padding:.03em 0;
}
.rise{display:inline-block;transform:translateY(110%);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.menu.open .rise{
  transform:none;transition:transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i) * .06s + .25s);
}
.menu.open .menu-list a:hover .rise,.menu.open .menu-list a:focus-visible .rise{
  transform:translateX(.18em);transition:transform .45s cubic-bezier(.16,1,.3,1);transition-delay:0s;
}
.menu-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2);
  margin-top:var(--space-3);padding-top:var(--space-2);
  border-top:1px solid rgba(255,255,255,.25);
  font:400 13px/18px var(--font);
}
.menu-foot ul{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3)}
.menu-foot a{transition:opacity .25s}
.menu-foot a:hover{opacity:.55}

/* two pages: home and about */
#about-page{display:none}
html[data-page="about"] #top{display:none}
html[data-page="about"] #about-page{display:block}

/* hero */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px var(--gutter) var(--space-4);
}
h1{font:400 clamp(28px,calc(6.2 * var(--u)),140px)/.98 var(--font);letter-spacing:-.02em}
.ln{display:block;overflow:hidden;padding:.06em 0 .26em;margin-bottom:-.26em}
.ln>span{
  display:block;
  animation:rise-in 1.1s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i) * .12s + .1s);
}
@keyframes rise-in{from{transform:translateY(115%)}}
.hero .ln>span{animation:none}
.glyph{display:inline-block;height:.82em;width:auto;vertical-align:-.07em;margin:0 .05em}
.glyph:not([src]){visibility:hidden}
.w{
  display:inline-block;
  animation:rise-in 1.1s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:calc(var(--i) * .14s + var(--w) * .07s + .1s);
}
.intro{
  max-width:34ch;margin-top:var(--space-3);color:var(--ink-muted);
  animation:fade-up 1s cubic-bezier(.16,1,.3,1) .9s backwards;
}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}}
.cue{
  position:absolute;right:var(--gutter);bottom:var(--space-4);
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);
  font:400 13px/18px var(--font);color:var(--ink-muted);
  animation:fade-up 1s cubic-bezier(.16,1,.3,1) 1.4s backwards;
}
.cue i{position:relative;width:1px;height:32px;background:var(--line);overflow:hidden}
.cue i::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:50%;background:var(--ink);
  animation:cue 1.8s cubic-bezier(.7,0,.2,1) infinite;
}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(200%)}}

/* sections */
.sec{padding:var(--space-4) var(--gutter) 0}
.work{padding-inline:0}
.work h2{padding-inline:var(--gutter)}
.filters{display:flex;flex-wrap:wrap;gap:var(--space-1);padding:0 var(--gutter);margin-bottom:var(--space-3)}

/* project grid: tiles of different widths in rows, top aligned, each keeps its picture's proportions */
.grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--space-4) var(--space-3);align-items:start;
  padding:0 var(--gutter);
}
.tile{grid-column:span var(--span,6);position:relative;display:block}
.media-box{
  position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paper-alt);
  border-radius:0;isolation:isolate;
  transition:border-radius .9s cubic-bezier(.22,1,.36,1);
}
.media-box img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* hover: the project and its text grow 5% */
.tile{transition:transform .9s cubic-bezier(.22,1,.36,1);will-change:transform}
a.tile:hover{transform:scale(1.05);z-index:2}
a.tile:hover .media-box{border-radius:28px}
.cap{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--space-2);
  margin-top:var(--space-1);
  font:400 clamp(16px,calc(1.6 * var(--u)),22px)/1.25 var(--font);letter-spacing:-.01em;
}
.cap-t,.cap-s{grid-column:1}
.cap-s{color:var(--ink-muted)}
.cap-y{grid-column:2;grid-row:1;text-align:right}
.cap-s:empty{display:none}
.err{grid-column:1/-1;color:var(--ink-muted)}
@media (max-width:700px){
  .grid{gap:var(--space-3)}
  .tile{grid-column:1/-1}
}

/* about page */
.ab-top{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-3);
  align-items:start;padding:calc(var(--gutter) + 132px + env(safe-area-inset-top,0px)) var(--gutter) 0;
}
.ab-photo{grid-column:1 / span 4}
.ab-ph{aspect-ratio:4/5;background:var(--paper-alt);display:grid;place-items:center}
.ab-ph img{width:46%;height:auto}
.ab-photo>img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.ab-note{margin-top:var(--space-2);font:400 15px/24px var(--font);color:var(--ink)}
.ab-main{grid-column:6 / span 7}
.ab-intro{font:400 clamp(28px,calc(4.2 * var(--u)),68px)/1 var(--font);letter-spacing:-.02em}
.ab-text{max-width:60ch}
.ab-text p{font:400 clamp(18px,calc(1.7 * var(--u)),24px)/1.26 var(--font);letter-spacing:-.01em}   /* line spacing 10% tighter */
.ab-text p+p{margin-top:var(--space-2)}
.ab-main .btn{margin-top:var(--space-3)}
.ab-sec{padding:var(--space-4) var(--gutter) 0}

/* experience: a menu you can open */
.acc{border-bottom:1px solid var(--line)}
.acc-item{border-top:1px solid var(--line)}
.acc-item h3{font:inherit;margin:0}
.acc-h{
  width:100%;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2fr) 24px;
  gap:var(--space-2);align-items:center;text-align:left;
  background:none;border:0;cursor:pointer;padding:var(--space-3) 0;
}
.acc-c{
  font:400 clamp(28px,calc(3.4 * var(--u)),56px)/1 var(--font);letter-spacing:-.02em;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.acc-r{color:var(--ink-muted)}
.acc-d{color:var(--ink-muted);font:400 14px/20px var(--font);text-align:right}
.acc-h:hover .acc-c,.acc-h:focus-visible .acc-c{transform:translateX(12px)}
.acc-i{position:relative;width:24px;height:24px}
.acc-i::before,.acc-i::after{
  content:"";position:absolute;left:2px;right:2px;top:11px;height:2px;background:currentColor;
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.acc-i::after{transform:rotate(90deg)}
.acc-item.open .acc-i::after{transform:rotate(0)}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.7,0,.2,1)}
.acc-item.open .acc-p{grid-template-rows:1fr}
.acc-in{overflow:hidden}
.acc-in ul{display:grid;gap:var(--space-1);padding:0 0 var(--space-3);margin-left:calc((100% - 72px) * 5 / 12 + var(--space-2));margin-right:calc(24px + var(--space-2))}
.acc-in li{font:400 15px/22px var(--font)}
@media (max-width:900px){
  .acc-h{grid-template-columns:minmax(0,1fr) 24px;row-gap:4px}
  .acc-c,.acc-r,.acc-d{grid-column:1;text-align:left}
  .acc-i{grid-column:2;grid-row:1}
  .acc-in ul{margin-left:0}
}
.ab-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);
  padding:var(--space-2) 0;border-top:1px solid var(--line);
}
.rec{border-bottom:1px solid var(--line)}
.ab-r{font:400 clamp(18px,calc(1.8 * var(--u)),26px)/1.2 var(--font)}
.ab-p{font:400 14px/20px var(--font);color:var(--ink-muted);text-align:right}
@media (max-width:900px){
  .ab-photo{grid-column:1/-1;max-width:320px}
  .ab-main{grid-column:1/-1}
}
/* footer: black, and as tall as the Google Labs footer in proportion to the page width (about 35% of it).
   Details on top (Say hi on the left, Follow and Based in on the right), the logo centred in the space between
   them and the thin line, then one small row with the year and the way back up. */
.foot{
  --fm:clamp(14px,calc(1.4 * var(--u)),36px);
  --g:40px;
  position:relative;margin-top:var(--space-4);
  display:flex;flex-direction:column;
  min-height:calc(35 * var(--u));
  padding:var(--gutter) 0 env(safe-area-inset-bottom,0px);
  background:var(--ink);color:var(--on-ink);
}
.foot-top{margin:0 var(--gutter);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}
.foot-say{display:grid;gap:4px}
.foot-say small{display:block;margin-bottom:var(--space-1);font:400 13px/18px var(--font);opacity:.55}
.foot-say a{font:400 clamp(18px,calc(2 * var(--u)),28px)/1.2 var(--font);letter-spacing:-.01em}
.foot-cols{display:flex;gap:clamp(40px,calc(6 * var(--u)),96px)}
.fc h3{margin:0 0 var(--space-2);font:400 15px/22px var(--font)}
.fc p,.foot-links a{margin:0;font:400 15px/22px var(--font);color:rgba(255,255,255,.62)}
.foot-links{display:grid;gap:4px}
.foot-links li{font-size:15px;line-height:22px}
.foot a{transition:color .25s,opacity .25s}
.foot-say a:hover,.foot-say a:focus-visible{opacity:.55}
.foot-links a:hover,.foot-links a:focus-visible{color:var(--on-ink)}
.mega-wrap{flex:1 1 auto;display:flex;align-items:center;padding:var(--g) var(--gutter);overflow:hidden}
.mega{flex:1 1 auto;min-width:0;display:block;color:var(--on-ink);line-height:0}
.mega svg{display:block;width:100%;height:auto;fill:currentColor}
.foot-bottom{
  margin:0 var(--gutter);padding:var(--gutter) 0;
  border-top:1px solid rgba(255,255,255,.28);
  display:flex;justify-content:space-between;align-items:center;
  font:400 13px/18px var(--font);color:rgba(255,255,255,.62);
}
.totop{
  display:grid;place-items:center;width:40px;height:40px;padding:0;cursor:pointer;
  border:var(--stroke) solid var(--on-ink);border-radius:50%;
  background:transparent;color:var(--on-ink);
  transition:background .25s,color .25s,transform .3s cubic-bezier(.3,1.5,.5,1);
}
.totop svg{width:18px;height:18px}
.totop:hover,.totop:focus-visible{background:var(--on-ink);color:var(--ink);transform:translateY(-3px)}
@media (max-width:700px){
  .foot{min-height:0;padding-top:var(--space-4);--g:48px}
  .foot-top{flex-direction:column;gap:var(--space-4)}
  .foot-cols{width:100%;justify-content:space-between;gap:var(--space-3)}
}

/* project view */
.project{
  position:fixed;inset:0;z-index:30;
  background:var(--paper);overflow:auto;outline:none;
  padding:0 var(--gutter) var(--space-4);
  clip-path:inset(100% 0 0 0);visibility:hidden;
  transition:clip-path .75s cubic-bezier(.7,0,.2,1),visibility 0s .75s;
}
.project.open{
  clip-path:inset(0);visibility:visible;
  transition:clip-path .75s cubic-bezier(.7,0,.2,1),visibility 0s;
}
.p-head{padding-top:calc(var(--gutter) + 92px + env(safe-area-inset-top,0px))}
.p-head h2{font:400 clamp(36px,calc(8 * var(--u)),112px)/.98 var(--font);letter-spacing:-.02em;margin:0}
.p-sub{margin-top:var(--space-2);color:var(--ink-muted)}
.facts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line)}
.facts dt{font:600 13px/18px var(--font);color:var(--ink-muted)}
.facts dd{margin:0}
.pills{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-3)}
.why{max-width:52ch;margin-top:var(--space-3)}
.media{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.media img,.media iframe{width:100%;display:block;background:var(--paper-alt)}
.mi{overflow:hidden}
.media iframe{aspect-ratio:16/9;border:0}
.p-foot{
  display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--space-2);
  margin-top:var(--space-4);font:400 clamp(20px,calc(2.4 * var(--u)),32px)/1.1 var(--font);
}
.p-foot a{transition:opacity .25s}
.p-foot a:hover{opacity:.5}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* project side controls: previous, next, close, with a label on hover */
.pnav{
  position:fixed;right:calc(var(--gutter) - 9px);z-index:36;   /* the menu button's bars end on the margin; its 44px button sticks out 9px, and these buttons line up with it */
  top:calc(env(safe-area-inset-top,0px) + max(4px, var(--gutter) - 13px) + 44px + var(--space-2));
  display:flex;flex-direction:column;gap:var(--space-1);
  color:#fff;mix-blend-mode:difference;   /* same as the menu button: white that inverts whatever is underneath */
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s .5s;
}
.pnav.show{opacity:1;visibility:visible;transform:none;transition:opacity .4s .35s,transform .5s cubic-bezier(.16,1,.3,1) .35s,visibility 0s}
html.menu-open .pnav{opacity:0;visibility:hidden}
.pn{position:relative;display:grid;place-items:center;width:44px;height:44px;color:#fff}
.pn svg{width:26px;height:26px;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}   /* each icon is centred under the middle of the menu button's bars */
.pn:hover svg,.pn:focus-visible svg{transform:scale(1.18)}
.pn-l{
  position:absolute;right:calc(100% - 3px);top:50%;transform:translate(10px,-50%);
  white-space:nowrap;pointer-events:none;opacity:0;
  background:var(--ink);color:var(--on-ink);
  padding:4px 14px;border-radius:var(--radius-pill);font:400 14px/20px var(--font);
  transition:opacity .25s,transform .4s cubic-bezier(.16,1,.3,1);
}
.pn:hover .pn-l,.pn:focus-visible .pn-l{opacity:1;transform:translate(0,-50%)}
@media (max-width:700px){
  .pn-l{display:none}   /* the hover labels are for a mouse; the controls themselves stay top right under the menu button, as on a laptop */
}
}

/* page transition wipe */
.wipe{position:fixed;inset:0;z-index:60;background:var(--ink);transform:translateY(100%);pointer-events:none}

/* scroll reveals (only when motion is allowed) */
.anim .rv{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--d,0) * 90ms);
}
.anim .rv.in{opacity:1;transform:none}
.anim .rvw>*{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--d,0) * 90ms);
}
.anim .rvw.in>*{clip-path:inset(0)}

/* optional film behind the first screen */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:transform;background:#0d0d0d center / cover no-repeat}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s}
.hero-media video.ready{opacity:1}
.hero>*:not(.hero-media){position:relative;z-index:1}
.hero>.cue{position:absolute}
.hero.has-video h1,.hero.has-video .intro,.hero.has-video .cue{color:#fff}
.hero.has-video .intro{color:rgba(255,255,255,.86)}
.hero.has-video .cue i{background:rgba(255,255,255,.35)}
.hero.has-video .cue i::after{background:#fff}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.46))}   /* keeps white text readable on bright moments of the film */
.hero.has-video .glyph{filter:invert(1)}

/* stickers: loose in the page, draggable; a pile appears on the screen when the site is left idle */
.stk-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:25}
.stk-layer.idle{position:fixed;inset:0;z-index:26}
.sticker{
  position:absolute;left:0;top:0;height:auto;max-width:none;
  pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-drag:none;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(var(--s,1));
  transition:transform .4s cubic-bezier(.3,1.4,.5,1),opacity .4s;
}
.sticker.jump{transition:none!important}
.sticker.held{cursor:grabbing;--s:1.07;transition:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.3));will-change:transform}
.sticker.pre{opacity:0;pointer-events:none}
.sticker.off{display:none}
.sticker.pop{animation:stk-pop .55s cubic-bezier(.3,1.6,.5,1) both}
.sticker.out{opacity:0;--s:.6;pointer-events:none}
@keyframes stk-pop{from{transform:translate(var(--x),var(--y)) rotate(calc(var(--r) + var(--pr,0deg))) scale(0)}}
@media (prefers-reduced-motion:reduce){.sticker.pop{animation:none}}

/* project media: full-width video, narrower picture, a row of pictures, an animation lying over a picture */
.project[data-theme="dark"]{--paper:#000;--paper-alt:#0a0a0a;--ink:#fff;--ink-muted:rgba(255,255,255,.62);--line:rgba(255,255,255,.28);--on-ink:#000;background:#000;color:#fff}
.media{position:relative}
.mi.full{margin-inline:calc(var(--gutter) * -1)}
.mi.narrow{width:var(--w,60%);margin-inline:auto}
.mi.group{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--space-3);overflow:visible}
.media .mi.group img{background:none}
.mi.has-over{position:relative;overflow:visible}
.media .over{
  position:absolute;left:var(--ox);top:var(--oy);width:var(--os);height:auto;z-index:3;background:none;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg)) scale(var(--sc,1));
  transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
.media .over.held{cursor:grabbing;--sc:1.05;transition:none;filter:drop-shadow(0 18px 18px rgba(0,0,0,.4))}
.why p{margin:0}
.why p+p{margin-top:var(--space-2)}
.mi.cap{max-width:var(--mx);margin-inline:auto}
.mi.scaled{width:calc(var(--sc) * 1%);margin-inline:auto}   /* a picture shown at a percentage of the page width */
.mi.after{margin-bottom:min(var(--after),calc(12 * var(--u)))}                 /* extra empty space below a picture */
@media (max-width:1000px){
  .mi.group[data-cols="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .mi.narrow{width:100%}
  .mi.group[data-cols="6"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-1)}
  .mi.group[data-cols="3"]{gap:var(--space-1)}
  .mi.group[data-cols="2"]{grid-template-columns:1fr}   /* the posts have small print: one under the other on a phone */
}
/* cover film on a tile */
.cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s;pointer-events:none}
.cv.on{opacity:1}

/* the text with an animation next to it */
.p-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);align-items:start;margin-top:var(--space-3)}
.p-body .why{margin-top:0}
.float{
  justify-self:center;width:min(100%,var(--fw,600px));height:auto;margin-top:calc(var(--space-3) * -1);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;position:relative;z-index:3;
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg)) scale(var(--sc,1));
  transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
.float.held{cursor:grabbing;--sc:1.04;transition:none;filter:drop-shadow(0 18px 18px rgba(0,0,0,.4))}
@media (max-width:700px){
  .p-body{grid-template-columns:1fr;gap:var(--space-3)}
  .float{width:min(86%,var(--fw,600px));margin-top:0}
}
/* embedded players: if the page refuses one, its box stays as a quiet black panel */
.vid{position:relative}
.vid.blocked{aspect-ratio:16/9;background:#0a0a0a}
.vid.blocked iframe{display:none}
.vfile video{width:100%;display:block;background:#000;aspect-ratio:16/9;object-fit:cover}

/* a text with a sketch under it, next to a tall picture */
.mi.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--space-4);align-items:start;overflow:visible}
.mi.feature .fq{margin:0;max-width:52ch;font:inherit}   /* the same size as the project's description text */
.media .mi.feature .fu{margin-top:var(--space-4);background:none;mix-blend-mode:multiply}   /* a drawing on white melts into the page */
@media (max-width:700px){
  .mi.feature{grid-template-columns:1fr;gap:var(--space-3)}
  .mi.feature .fi{order:-1}
}