@font-face{font-family:"Anybody";src:url(vendor/fonts/anybody.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}
@font-face{font-family:"Geist";src:url(vendor/fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#efeee9;--ink:#0c0c0c;--mute:#8a8984;--line:rgba(12,12,12,.13);--acc:#ff4d00;
  --gut:clamp(16px,2.2vw,32px);--col:calc((100vw - 2 * var(--gut) - 11 * var(--gap)) / 12);--gap:clamp(10px,1.2vw,18px);
  --ease:cubic-bezier(.2,.7,.1,1);--snap:cubic-bezier(.3,1.6,.4,1);
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;--serif:"Instrument Serif",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{overflow-x:hidden;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scrollbar-width:thin}
body{font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;line-height:1.45}
.lbl{color:var(--mute)}
::selection{background:var(--acc);color:#fff}

/* grain: faint, alive */
.grain{position:fixed;inset:-50%;z-index:95;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}

/* the dot: your cursor, a beat behind you */

.cur{position:fixed;left:0;top:0;z-index:99;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;pointer-events:none;will-change:transform}
.cur::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--acc);transform:scale(var(--s,1));transition:transform .45s var(--snap)}
.cur span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);color:#fff;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .2s,transform .4s var(--snap)}
.cur.big{--s:2.4}

.cur.link{--s:2.4}
.cur.down::before{transform:scale(calc(var(--s,1) * .7))}
html:not(.dotc) .cur,html.crawling .cur,html.flying .cur,html.caught .cur{display:none}
html.crawling,html.crawling *{cursor:auto!important}

/* rolling labels: the word slides up and its twin follows */
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;line-height:1.2}
.roll::after{content:attr(data-t);position:absolute;left:0;top:100%}
.roll,.roll::after{transition:transform .5s var(--ease)}
a:hover .roll,button:hover .roll{transform:translateY(-100%)}
a:hover .roll::after,button:hover .roll::after{transform:translateY(0)}

/* reveal on arrival */
[data-r]{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
[data-r].in{opacity:1;transform:none}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding:16px var(--gut);mix-blend-mode:difference;color:#fff}
.brand{grid-column:1 / span 3;display:flex;align-items:center;gap:8px}
.brand sup{font-size:8px;opacity:.6}
.bdot{width:7px;height:7px;border-radius:50%;background:#00b2ff;display:inline-block;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.nav{grid-column:6 / span 4;display:flex;gap:26px}
.where{grid-column:11 / span 2;text-align:right}

/* hero: the name, huge, and the chrome turning above it */
.hero{position:relative;height:100svh;min-height:560px;padding:0 var(--gut);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-meta{position:absolute;top:calc(16px + 15vh);left:var(--gut);right:var(--gut);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.hero-meta span:nth-child(1){grid-column:1 / span 3}
.hero-meta span:nth-child(2){grid-column:6 / span 3}
.hero-meta span:nth-child(3){grid-column:9 / span 2}
.hero-meta span:nth-child(4){grid-column:11 / span 2;text-align:right}
.scroll i{display:inline-block;font-style:normal;animation:bob 1.8s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(4px)}}
.chrome{position:absolute;left:50%;top:44%;width:min(46vw,760px);transform:translate(-50%,-50%);perspective:900px;pointer-events:none;mix-blend-mode:multiply}
.chrome video{width:100%;filter:contrast(1.06) saturate(0);transform-style:preserve-3d;will-change:transform}
.name{width:max-content;font-weight:600;font-size:17.2vw;line-height:.78;letter-spacing:-.075em;white-space:nowrap;margin:0 0 calc(var(--gut) * .6) -.04em;position:relative;z-index:2;user-select:none}
.name .c{display:inline-block;will-change:transform}
.name .sp{display:inline-block;width:.18em}

/* statement */
.stmt{padding:clamp(100px,20vh,220px) var(--gut) clamp(80px,14vh,160px);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.stmt .lbl{grid-column:1 / span 2;padding-top:1.2em}
.big{grid-column:3 / span 9;font-weight:500;font-size:clamp(30px,4.4vw,74px);line-height:1.02;letter-spacing:-.04em}
.big em{font-size:1.08em;letter-spacing:-.02em}
.big .w{display:inline}
.more{grid-column:3 / span 4;margin-top:clamp(28px,4vh,48px);display:inline-flex;gap:8px;align-items:center}
.more i{font-style:normal;transition:transform .5s var(--ease)}
.more:hover i{transform:translateX(6px)}

/* clients marquee */
.marq{display:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:clamp(16px,2.6vh,26px) 0;white-space:nowrap}
.mq{display:inline-flex;gap:0;will-change:transform}
.mq span{font-weight:500;font-size:clamp(34px,5vw,84px);letter-spacing:-.045em;line-height:1;padding:0 .35em;display:inline-flex;align-items:center;gap:.7em}
.mq span::after{content:"✦";font-size:.32em;color:var(--acc);display:inline-block;animation:spin 6s linear infinite}
.mq span:nth-child(even){font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
@keyframes spin{to{transform:rotate(360deg)}}

/* the index */
.work{padding:clamp(80px,14vh,160px) var(--gut) 0;position:relative}
.wh{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.idx{position:relative}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:center;padding:clamp(8px,1.2vw,16px) 0;border-bottom:1px solid var(--line);position:relative}
.row>*{transition:opacity .5s var(--ease)}
.row .n{grid-column:1 / span 1;color:var(--mute)}
.row .tt{grid-column:1 / span 8;font-weight:500;font-size:clamp(28px,3.4vw,58px);line-height:.95;letter-spacing:-.05em;white-space:nowrap;mix-blend-mode:difference;color:#fff;position:relative;z-index:3}
.row .tt .c{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.02}
.row .tt .c b{display:inline-block;font-weight:inherit;transition:transform .55s var(--ease);transition-delay:calc(var(--k) * 18ms);text-shadow:0 1.02em 0 currentColor}
.row:hover .tt .c b,.row.hot .tt .c b{transform:translateY(-1.02em)}
.row .tt .sp{display:inline-block;width:.24em}
.row .tt .wd{display:inline-block;white-space:nowrap}
.row .c2{grid-column:10 / span 3;text-align:right;mix-blend-mode:difference;color:#fff;position:relative;z-index:3}
.row .k{grid-column:11 / span 2;text-align:right;color:var(--mute);position:relative;z-index:3}
.row .ar{position:absolute;right:0;top:50%;width:18px;height:18px;margin-top:-9px;opacity:0}
.idx.on .row:not(.hot)>*{opacity:.22}
.row .bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.row.hot .bar{transform:scaleX(1)}
.row .thumb{display:none}

/* preview: under the titles, following the hand */
.pv{position:fixed;left:0;top:0;z-index:1;width:clamp(260px,26vw,440px);pointer-events:none;will-change:transform}
.pv .fr{position:relative;width:100%;aspect-ratio:var(--ar,4/5);overflow:hidden;clip-path:inset(50% 50% 50% 50%);transition:clip-path .7s var(--ease),aspect-ratio .6s var(--ease);background:#d8d7d2}
.pv.show .fr{clip-path:inset(0)}
.pv video,.pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.15);transition:opacity .35s ease,transform 1.4s var(--ease)}
.pv .cur2{opacity:1;transform:scale(1)}
body.viewing .pv{display:none}

/* footer */
.foot{padding:clamp(120px,22vh,240px) var(--gut) 18px;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);border-top:1px solid var(--line);margin-top:clamp(100px,18vh,200px)}
.foot>.lbl{grid-column:1 / span 2;padding-top:1.4em}
.cta{grid-column:3 / span 10;font-weight:500;font-size:clamp(44px,8.4vw,150px);line-height:.9;letter-spacing:-.055em}
.cta em{letter-spacing:-.03em}
.mail{grid-column:3 / span 10;margin-top:clamp(28px,5vh,56px);font-size:clamp(18px,2vw,30px);letter-spacing:-.02em;display:inline-flex;gap:10px;align-items:center;justify-self:start;border-bottom:1px solid var(--ink);padding-bottom:4px}
.mail i{font-style:normal;color:var(--acc);transition:transform .5s var(--ease)}
.mail:hover i{transform:translate(4px,-4px) rotate(45deg)}
.fcols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-top:clamp(100px,18vh,200px)}
.fcols>div{grid-column:span 3;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.fcols p{color:var(--mute);margin-bottom:6px}
.legal{grid-column:1 / -1;display:flex;justify-content:space-between;color:var(--mute);margin-top:clamp(40px,8vh,80px)}

/* the easter egg: a hole and a launch pad, quietly in the footer */
.toys{gap:8px!important}
.hole,.pad{display:inline-flex;align-items:center;gap:8px;padding:0;font:inherit;letter-spacing:inherit;color:var(--ink)}
.hole i{position:relative;flex:none;display:block;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 50% 64%,#000 0 46%,#1c1c20 72%,#000 100%);box-shadow:inset 0 3px 5px rgba(0,0,0,.9),0 0 0 1px var(--line);transition:transform .35s var(--snap)}
.hole:hover i{transform:scale(1.25)}
.hole i::before,.hole i::after{content:"";position:absolute;left:4px;top:7px;width:2px;height:2px;border-radius:50%;background:#fff;opacity:0;animation:peek 7s infinite}
.hole i::after{left:10px}
.hole:hover i::before,.hole:hover i::after{animation:none;opacity:.95}
@keyframes peek{0%,78%,100%{opacity:0}82%,88%{opacity:.9}85%{opacity:0}92%{opacity:.9}96%{opacity:0}}
.hole.open,.pad.open{color:var(--acc)}
.pad svg{transition:transform .35s var(--snap)}
.pad:hover svg{transform:translateY(-3px)}
.crawl{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}
html.caught,html.caught *{cursor:none!important}
html.holding,html.holding *{cursor:grabbing!important}
html.flying,html.flying *{cursor:crosshair!important}
html.flying .hole,html.flying .hole *,html.flying .pad,html.flying .pad *{cursor:pointer!important}
html.flying{-webkit-user-select:none;user-select:none}

/* ---------- project pages ---------- */
.pj{padding:calc(16px + 14vh) var(--gut) 0}
.pj-meta{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);color:var(--mute);margin-bottom:clamp(20px,3vh,36px)}
.pj-meta span:nth-child(1){grid-column:1 / span 2}
.pj-meta span:nth-child(2){grid-column:6 / span 3}
.pj-meta span:nth-child(3){grid-column:9 / span 2}
.pj-meta span:nth-child(1){grid-column:1 / span 6!important}
.pj-meta a{grid-column:11 / span 2;text-align:right;color:var(--ink)}
.pj-meta a:hover{color:var(--acc)}
.pj-t{font-weight:600;font-size:clamp(56px,12.5vw,240px);line-height:.82;letter-spacing:-.07em;margin-left:-.04em}
.pj-t .wd{display:inline-block;white-space:nowrap}
.pj-t .c{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--k) * 28ms)}
.pj-t .clip{display:inline-block;overflow:hidden;padding-bottom:.08em;vertical-align:top}
.pj.in .pj-t .c{transform:none}
.pj-t .sp{display:inline-block;width:.22em}
.pj-lead{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin:clamp(40px,8vh,90px) 0 clamp(60px,12vh,140px)}
.pj-lead .lbl{grid-column:1 / span 2;padding-top:.5em}
.pj-lead p{grid-column:1 / span 7;font-weight:500;font-size:clamp(22px,2.4vw,40px);line-height:1.12;letter-spacing:-.03em}
.grp{margin-bottom:clamp(80px,14vh,160px)}
.gh{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end;margin-bottom:clamp(18px,3vh,30px);padding-bottom:12px;border-bottom:1px solid var(--line)}
.gh .lbl{grid-column:1 / span 2}
.gh h2{grid-column:1 / span 6;font-weight:500;font-size:clamp(26px,3vw,48px);letter-spacing:-.04em;line-height:1}
.gh p{grid-column:9 / span 4;font-size:15px;line-height:1.45;color:#3a3a38}
.gm{display:flex;flex-wrap:wrap;gap:var(--gap);--rh:clamp(260px,42vh,520px)}
.gm.solo{justify-content:center}
.tile{flex-grow:var(--a);flex-basis:calc(var(--a) * var(--rh));max-width:calc(var(--a) * var(--rh) * 1.8);position:relative;margin:0}
.gm.big{display:flex;flex-wrap:wrap;gap:var(--gap)}
.gm.big .tile{flex:none;max-width:none}
.gm.cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.gm.cols .tile{max-width:calc(var(--a) * 86svh);width:100%;justify-self:center}
.gm.solo .tile{flex-grow:0;flex-basis:auto;max-width:none;width:min(100%,calc(var(--a) * 86svh))}
.gm.even .tile{flex-basis:0;flex-grow:var(--a);max-width:none}
.tm{position:relative;width:100%;aspect-ratio:var(--a);overflow:hidden;background:#dcdbd6}
.tm img,.tm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile:hover .tm img,.tile:hover .tm video{transform:scale(1.035)}
.tile .tm{clip-path:inset(12% 6% 0 6%);transition:clip-path 1.2s var(--ease)}
.tile.in .tm{clip-path:inset(0)}
.tile figcaption{display:flex;gap:14px;margin-top:10px;color:var(--mute);align-items:baseline}
.tile figcaption b{font-weight:400;color:var(--ink);text-transform:none;font-family:var(--sans);font-size:14px;letter-spacing:-.01em}
.tile figcaption em{font-family:var(--mono);font-style:normal;margin-left:auto;color:var(--ink)}
.tile .play{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center}
.tile .play::before{content:"";border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.nxp{display:block;border-top:1px solid var(--line);padding:clamp(40px,8vh,80px) 0 clamp(60px,10vh,120px);margin-top:clamp(40px,8vh,100px)}
.nxp .lbl{display:block;margin-bottom:14px}
.nxp .t{font-weight:600;font-size:clamp(48px,10vw,190px);line-height:.85;letter-spacing:-.065em;display:inline-flex;gap:.2em;align-items:baseline}
.nxp .t i{font-style:normal;font-weight:300;color:var(--acc);transition:transform .6s var(--ease)}
.nxp:hover .t i{transform:translateX(.15em)}

/* about */
.ab{padding:calc(16px + 14vh) var(--gut) 0}
.ab .pj-t{margin-bottom:clamp(40px,8vh,90px)}
.ab-g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.ab-g .lbl{grid-column:1 / span 2}
.ab-g .big{grid-column:1 / span 9}
.ab-l{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(60px,12vh,140px)}
.ab-l p.mono{color:var(--mute);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ab-l a,.ab-l span{display:block;font-size:17px;letter-spacing:-.015em;line-height:1.6}
.ab-l a:hover{color:var(--acc)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:#0b0b0b;color:#f2f1ec;display:flex;flex-direction:column}
.lb-st{flex:1;display:grid;place-items:center;padding:56px var(--gut) 12px;min-height:0}
.lb-st>*{max-width:100%;max-height:calc(100svh - 120px);width:auto;height:auto}
.lb-st iframe{width:min(100%,calc((100svh - 120px) * 16 / 9));aspect-ratio:16/9;border:0;height:auto}
.lb-ui{display:flex;justify-content:space-between;gap:20px;padding:14px var(--gut) 18px;color:#9a9994}
.lb-ui #lbc{color:#f2f1ec;text-transform:none;font-family:var(--sans);font-size:14px;letter-spacing:-.01em;flex:1}
.lb-b{display:flex;gap:22px}
.lb-b button{color:#f2f1ec;letter-spacing:inherit;text-transform:uppercase;font-size:11px}
.lb-b button:hover{color:var(--acc)}

@media (max-width:820px){
  .brand{grid-column:1 / span 6;white-space:nowrap}
  .nav{grid-column:7 / span 6;gap:14px;justify-content:flex-end}
  .tile figcaption{flex-wrap:wrap;gap:4px 10px}
  .tile figcaption em{margin-left:0;width:100%}
  .where,.hide-s{display:none}
  .hero-meta{top:calc(16px + 10vh)}
  .hero-meta span:nth-child(1){grid-column:1 / span 6}
  .hero-meta span:nth-child(2){grid-column:7 / span 6;text-align:right}
  .hero-meta span:nth-child(4){display:none}
  .chrome{width:86vw;top:46%}
  .stmt .lbl,.big,.more{grid-column:1 / -1}
  .stmt .lbl{padding:0}
  .row{grid-template-columns:1fr 72px;gap:4px 14px}
  .row .n,.row .k{display:none}
  .row .tt{grid-column:1;font-size:clamp(24px,7.4vw,40px);white-space:normal;mix-blend-mode:normal;color:var(--ink)}
  .row .c2{grid-column:1;grid-row:2;color:var(--mute);mix-blend-mode:normal}
  .row .thumb{display:block;grid-column:2;grid-row:1 / 3;width:72px;aspect-ratio:4/5;object-fit:cover;background:#dcdbd6}
  .pv{display:none}
  .foot>.lbl,.cta,.mail{grid-column:1 / -1}
  .fcols>div{grid-column:span 6;margin-bottom:28px}
  .pj-meta span:nth-child(2),.pj-meta span:nth-child(3){display:none}
  .pj-meta span:nth-child(1){grid-column:1 / span 6}
  .pj-meta a{grid-column:7 / span 6}
  .pj-lead .lbl,.pj-lead p,.gh .lbl,.gh h2,.gh p{grid-column:1 / -1}
  .gm{--rh:46vh}
  .tile{flex-basis:100%!important;max-width:none!important}
  .gm.big{display:flex;flex-wrap:wrap;gap:var(--gap)}
.gm.big .tile{flex:none;max-width:none}
.gm.cols{grid-template-columns:1fr 1fr}
  .ab-g .lbl,.ab-g .big,.ab-l{grid-column:1 / -1}
  .ab-l{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .grain,.mq span::after{animation:none} [data-r]{opacity:1;transform:none} }
/* while the game is on, letters get knocked loose: keep them plain ink so they stay visible */
html.crawling .row .tt,html.flying .row .tt,html.crawling .row .c2,html.flying .row .c2{mix-blend-mode:normal;color:var(--ink)}

/* compact intro: one line, the chrome mark, then straight into the work */
.intro2{padding:calc(16px + 9vh) var(--gut) clamp(32px,6vh,64px);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end}
.lead2{grid-column:1 / span 5;font-weight:500;font-size:clamp(18px,1.6vw,24px);line-height:1.12;letter-spacing:-.03em}
.lead2 em{font-size:1.06em}
.sf2{grid-column:11 / span 2;justify-self:end;width:clamp(90px,8vw,130px);mix-blend-mode:multiply}
.sf2 video{width:100%}
.work{padding-top:0}
@media (max-width:820px){ .intro2{padding-top:110px} .lead2{grid-column:1 / span 9} .sf2{grid-column:10 / span 3;width:80px} }

.nxp .t small{display:block;font:400 11px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.nxp .t{flex-wrap:wrap}
.nav{grid-column:9 / span 4;justify-content:flex-end}
.foot{display:block;margin-top:clamp(80px,14vh,160px);padding:clamp(40px,8vh,80px) var(--gut) clamp(40px,8vh,80px)}
.foot .fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin:0}
.foot .fcols>div{grid-column:auto;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.foot .fcols p{font:400 11px/1.4 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.foot .fcols a,.foot .fcols>div>span{font-size:15px;letter-spacing:-.01em;line-height:1.55}
.foot .fcols a:hover{color:var(--acc)}
.foot .toys button{white-space:nowrap}
.foot .toys{display:flex;gap:16px;margin-top:14px;font:400 11px/1 var(--mono);letter-spacing:.03em}
@media (max-width:820px){ .foot .fcols{grid-template-columns:1fr 1fr;row-gap:32px} .nav{grid-column:7 / span 6} }

/* index: stacked names */
.idx{display:flex;flex-direction:column;align-items:center;padding:clamp(10px,3vh,40px) 0 0;position:relative}
.nm{position:relative;display:flex;align-items:flex-start;justify-content:center;width:100%;padding:0 var(--gut)}
.nm::before{content:"";position:absolute;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));top:4%;bottom:2%;background:var(--ink);transform:scaleY(0);transition:transform .45s var(--ease);z-index:0}
.nm .t{position:relative;z-index:2;font-weight:700;font-variation-settings:"wght" 720;text-transform:uppercase;font-size:clamp(40px,6.6vw,118px);line-height:.8;letter-spacing:-.055em;white-space:nowrap;transition:color .25s}
.nm .k{position:relative;z-index:2;font-weight:700;font-size:clamp(9px,.75vw,12px);line-height:1;text-transform:uppercase;letter-spacing:-.01em;margin:.9em .5em 0 0;white-space:nowrap;transition:color .25s;text-align:right}
.nm .pa,.nm .pb{position:absolute;top:50%;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transform:translateY(-50%) scale(.9);transition:opacity .3s,transform .6s var(--ease)}
.nm .pa{left:var(--gut);width:clamp(90px,8vw,140px);aspect-ratio:4/5}
.nm .pb{right:var(--gut);width:clamp(120px,11vw,190px);aspect-ratio:16/10}
.nm .pa *,.nm .pb *{width:100%;height:100%;object-fit:cover;display:block}
.nm:hover::before,.nm.on::before{transform:scaleY(1)}
.nm:hover .t,.nm:hover .k,.nm.on .t,.nm.on .k{color:var(--bg)}
.nm:hover .pa,.nm:hover .pb,.nm.on .pa,.nm.on .pb{opacity:1;transform:translateY(-50%) scale(1)}
.idx:hover .nm.on:not(:hover)::before{transform:scaleY(0)}
.idx:hover .nm.on:not(:hover) .t,.idx:hover .nm.on:not(:hover) .k{color:var(--ink)}
.idx:hover .nm.on:not(:hover) .pa,.idx:hover .nm.on:not(:hover) .pb{opacity:0}
.pv{display:none!important}
@media (max-width:820px){ .nm{flex-direction:column;align-items:center;padding-top:10px;padding-bottom:6px} .nm::before{top:0;bottom:0} .nm .k{margin:0 0 4px} .nm .t{white-space:nowrap;text-align:center} .nm .pa,.nm .pb{display:none} }

.nm .t i{font-style:normal;display:inline}
.idx{padding-top:16px}
@media (min-width:821px){ .nm .t{margin-top:-.06em} }
.work{padding-top:0}
.top{mix-blend-mode:multiply;color:var(--ink);align-items:center}
.brand video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.brand canvas{width:64px;display:block;transform-origin:30% 50%;will-change:transform}
@media (hover:none){ .nm .t{font-variation-settings:"wght" 700} }

/* contact pop-out */
.nav button{font:inherit;letter-spacing:inherit;text-transform:uppercase}
.ct{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:var(--gut);background:rgba(239,238,233,0);backdrop-filter:blur(0);transition:background .45s,backdrop-filter .45s}
.ct.on{background:rgba(239,238,233,.55);backdrop-filter:blur(14px)}
.ct-card{position:relative;width:min(760px,100%);background:#0c0c0c;color:#efeee9;padding:clamp(28px,4vw,52px);border-radius:22px;overflow:hidden;transform-style:preserve-3d;opacity:0;scale:.92;transition:opacity .45s var(--ease),scale .6s var(--snap);box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.ct.on .ct-card{opacity:1;scale:1}
.ct-shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.12),transparent 60%)}
.ct-x{position:absolute;right:18px;top:16px;color:#efeee9;font-size:14px;opacity:.6}
.ct-x:hover{opacity:1;color:var(--acc)}
.ct-n{font-weight:700;font-size:clamp(40px,7vw,84px);line-height:.86;letter-spacing:-.055em;transform:translateZ(40px)}
.ct-r{font-weight:700;font-size:clamp(13px,1.2vw,16px);letter-spacing:-.01em;margin-top:14px;color:#9a9994;transform:translateZ(30px)}
.ct-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(30px,5vh,56px);transform:translateZ(20px)}
.ct-g p{font:400 11px/1.4 var(--mono);letter-spacing:.03em;color:#85847f;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.15)}
.ct-g a,.ct-g span{display:block;font-weight:600;font-size:13px;letter-spacing:-.005em;line-height:1.6}
.ct-g a:hover{color:var(--acc)}
@media (max-width:820px){ .ct-g{grid-template-columns:1fr} }

/* project titles: capitals, heavy, never clipped */
.pj-t{text-transform:uppercase;font-weight:700;letter-spacing:-.055em;line-height:.86;font-size:clamp(48px,9vw,170px)}
.pj-t .clip{overflow:visible;clip-path:inset(-.2em -.1em 0 -.1em);padding-bottom:0}

.top{pointer-events:none}
.top a,.top button{pointer-events:auto}

@media (max-width:820px){
  .idx{padding-top:78px}
  .nm .t{line-height:.86}
  .brand canvas{width:56px}
}

/* flow layout (try) */
.idx.fl{display:grid!important;place-items:center;min-height:100svh;text-align:center;padding:96px var(--gut)!important;font-family:"Anybody",var(--sans);font-stretch:108%;font-weight:800;text-transform:uppercase;font-size:clamp(22px,3.25vw,58px);line-height:.9;letter-spacing:-.035em}
.flb{max-width:1180px}
.flb.fixed{}
.fr{white-space:nowrap}
@media (max-width:820px){ .fr{white-space:normal} }
.fi{display:inline;white-space:nowrap;transition:opacity .15s}
.fi .w{white-space:nowrap}
.fi .tw{white-space:nowrap}
.fi .w i{font-style:normal;display:inline-block;font-variation-settings:"wght" 780,"wdth" 108}
.fi .sc{line-height:0;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:lowercase;font-size:1.12em;letter-spacing:-.02em;font-stretch:100%;margin:0 .04em}
.fi .orn{display:inline-block;font-size:.8em;margin-right:.18em;vertical-align:.04em;font-family:var(--sans);font-stretch:100%;transition:transform .8s var(--ease)}
.fi .orn{transition:transform .5s cubic-bezier(.3,1.9,.4,1)}
.fi:hover .orn{transform:rotate(200deg) scale(1.4)}
.fi .th{display:inline-block;position:relative;width:1.55em;height:.78em;margin:0 .14em 0 .2em;vertical-align:-.02em;background:#dcdbd6;transition:transform .55s var(--ease);z-index:1}
.fi .th img,.fi .th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fi .th{overflow:hidden}
.fi .th img,.fi .th video{transition:transform .5s cubic-bezier(.3,1.6,.4,1)}
.fi:hover .th img,.fi:hover .th video{transform:scale(1.25)}
.idx.fl .fi:not(.on){opacity:.22}
.fi{position:relative}
@media (max-width:820px){ .idx.fl{min-height:0;padding-top:96px;font-size:clamp(20px,6.4vw,36px);line-height:.9} }

/* project pages, tighter: small header, section names sit to the left of their work */
.pj{padding-top:84px}
.pj-meta{margin-bottom:10px}
.pj-t{font-size:clamp(34px,4.6vw,76px)!important;line-height:.9}
.pj-lead{margin:18px 0 44px}
.pj-lead:empty{margin:0 0 30px}
.pj-lead p{font-size:clamp(17px,1.4vw,22px);grid-column:1 / span 6}
.grp{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:var(--gap);margin-bottom:clamp(36px,6vh,72px);align-items:start}
.grp>.gh{grid-column:1;display:block;border:0;padding:0;margin:0;position:sticky;top:84px}
.grp>.gh h2{font-size:clamp(18px,1.5vw,24px);letter-spacing:-.03em;line-height:1.05}
.grp>.gh p{font-size:14px;margin-top:8px;color:#5a5955}
.grp>.gm{grid-column:2}
.grp>.gm:first-child{grid-column:1 / -1}
.gm.solo .tile{width:min(100%,calc(var(--a) * 70svh))}
.gm.solo{justify-content:flex-start}
.nxp{padding:36px 0 60px;margin-top:20px}
.nxp .t{font-size:clamp(34px,4.6vw,76px)}
@media (max-width:820px){
  .pj{padding-top:76px}
  .grp{grid-template-columns:1fr}
  .grp>.gh{position:static;margin-bottom:12px}
  .grp>.gm{grid-column:1}
}

/* hover punch: the name jumps letter by letter, flashes orange, settles */
/* hover: no roll; the drama is in the weight */
.fi .w i b{font-weight:inherit}
.fi .sc{transition:transform .55s cubic-bezier(.7,0,.2,1)}
.fi:hover .sc{transform:translateY(-.06em) skewX(-6deg)}
@keyframes wob{0%{rotate:0deg}40%{rotate:-10deg}100%{rotate:0deg}}
.fi .sc{display:inline-block}

/* one static screen: no footer, the toys tucked in the bottom corner */
.corner{position:fixed;left:var(--gut);bottom:14px;z-index:55;display:flex;gap:16px}
.corner .toys{display:flex;gap:16px}
.corner .hole,.corner .pad{font:inherit;letter-spacing:inherit;color:var(--mute)}
.corner .hole:hover,.corner .pad:hover{color:var(--ink)}
body.viewing .corner{display:none}
#home{min-height:100svh}
.ct-g{grid-template-columns:repeat(4,1fr)}
/* wide type for every main title */
.pj-t,.nxp .t,.ct-n{font-family:"Anybody",var(--sans);font-stretch:108%;font-weight:800;letter-spacing:-.035em;text-transform:uppercase}
.pj-t{font-size:clamp(28px,3.8vw,62px)!important;line-height:.95}
.nxp .t{font-size:clamp(28px,3.8vw,62px)}
.ct-n{font-size:clamp(30px,5vw,64px);line-height:.92}
.ct-r{font-family:"Anybody",var(--sans);font-stretch:130%;font-weight:600;font-size:12px;letter-spacing:.02em}
.ct-g a,.ct-g span{font-family:"Anybody",var(--sans);font-stretch:120%;font-weight:560;font-size:12px;letter-spacing:.01em}
@media (max-width:820px){ .ct-g{grid-template-columns:1fr 1fr} .corner{bottom:10px} }

/* play the full film: a clear button on every film */
.tile{cursor:pointer}
.tm .veil{position:absolute;inset:0;z-index:1;background:rgba(239,238,233,.45);transition:opacity .4s}
.tile:hover .tm .veil{opacity:0}
.tm .pf{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 12px;border-radius:99px;background:#efeee9;color:#0c0c0c;font-family:"Anybody",var(--sans);font-stretch:130%;font-weight:700;font-size:11px;letter-spacing:.02em;text-transform:uppercase;transition:background .3s,color .3s,transform .4s var(--ease)}
.tm .pf svg{width:10px;height:10px}
.tile:hover .tm .pf{background:var(--acc);color:#fff;transform:scale(1.06)}
.tile .play{display:none}

/* ===== project pages, final pass: one centred column, work at its own shape, nothing floating ===== */
.pj{max-width:1440px;margin:0 auto;padding:88px var(--gut) 0;text-align:center}
.pj-meta{display:block;color:var(--mute);margin-bottom:14px}
.pj-meta span{display:inline!important}
.pj-t{margin:0 auto}
.pj-lead{display:block;margin:20px auto 56px;max-width:36em}
.pj-lead:empty{margin:0 0 40px}
.pj-lead p{font-size:clamp(16px,1.25vw,19px);line-height:1.4;letter-spacing:-.01em;color:#2a2a28}
.grp{display:block;margin:0 0 clamp(64px,10vh,110px)}
.grp>.gh{position:static;display:block;margin:0 auto 22px;max-width:40em}
.grp>.gh h2{font-family:"Anybody",var(--sans);font-stretch:112%;font-weight:760;text-transform:uppercase;font-size:clamp(15px,1.15vw,18px);letter-spacing:.01em}
.grp>.gh p{font-size:14px;line-height:1.45;margin-top:8px;color:#5a5955}
.gm.big{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.gm.big .tile{flex:none;max-width:100%;text-align:left}
.tile figcaption{margin-top:8px}
.tm .veil{background:rgba(12,12,12,.22)}
.tm .pf{background:#fff}
.nxp{text-align:center;border-top:1px solid var(--line);padding:44px 0 64px;margin-top:0}
.nxp .t{justify-content:center}
@media (max-width:820px){ .pj{padding-top:80px} .gm.big .tile{width:100%!important} .pj-lead{margin-bottom:36px} }
body.viewing .top{background:var(--bg);mix-blend-mode:normal}
@media (max-width:820px){ .gm.big{gap:10px} .gm.big .tile{margin:0} }

.vt{display:inline-block}
.vw{display:inline-block;white-space:nowrap}
.pj-t .c,.nxp .t .vt,.ct-n .vt{transition:none}

/* the easter egg: a little capsule ball in the corner that wobbles now and then */
.pball{display:inline-flex;align-items:center;gap:8px;padding:0;font:inherit;letter-spacing:inherit;color:var(--mute)}
.pball:hover{color:var(--ink)}
.pball span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s var(--ease)}
.pball:hover span,.pball:focus-visible span{max-width:120px}
.pball i{position:relative;flex:none;display:block;width:16px;height:16px;border-radius:50%;background:linear-gradient(#8a5ad6 0 44%,#1a1a1a 44% 56%,#f4efe4 56%);box-shadow:inset 0 0 0 1.5px #1a1a1a;animation:wob 5s infinite;transform-origin:50% 90%}
.pball i::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;translate:-50% -50%;border-radius:50%;background:#f4efe4;box-shadow:0 0 0 1.5px #1a1a1a}
.pball:hover i{animation:wob .5s infinite}
.pball.go i{animation:none;transform:scale(1.6);transition:transform .25s}
.pball.go i::after{background:#ffd76a}
@keyframes wob{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-18deg)}90%{transform:rotate(14deg)}94%{transform:rotate(-8deg)}97%{transform:rotate(4deg)}}
.flash{position:fixed;inset:0;z-index:999;background:#fff;pointer-events:none;animation:fl .45s forwards}
@keyframes fl{from{opacity:0}35%{opacity:1}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pball i{animation:none}}
/* the toys spread across the foot of the page: one left, one centre, one right */
.corner{right:var(--gut)}
.corner .toys{flex:1;justify-content:space-between;align-items:center}
.corner .pball span{max-width:none}

/* ---------- the tunnel index ---------- */
body[data-tunnel]:not(.viewing) #home{height:100svh;overflow:hidden}
body[data-tunnel] .work{height:100svh}
body[data-tunnel] #idx{position:fixed;inset:0;touch-action:none;cursor:grab;user-select:none}
body[data-tunnel] #idx:active{cursor:grabbing}
.tun-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.tun-lab{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;color:var(--ink)}
.tun-hit{position:absolute;left:calc(var(--half) * -1);top:-4vh;width:calc(var(--half) * 2);height:8vh;pointer-events:auto;cursor:pointer}
.tun-l,.tun-r{position:absolute;top:0;translate:0 -50%;white-space:nowrap;font-size:clamp(14px,1.2vw,19px);letter-spacing:-.01em}
.tun-l{right:calc(var(--half) + 1.4vw)}
.tun-r{left:calc(var(--half) + 1.4vw);display:flex;align-items:center;gap:12px}
.tun-l em,.tun-k{font-family:var(--serif)}
.tun-k{font-style:normal}
.tun-th{display:flex;align-items:center;gap:4px;font-family:var(--sans);font-weight:300;font-size:1.6em;opacity:.9}
.tun-pic{display:inline-block;position:relative;width:2.3em;height:1.5em;overflow:hidden;border-radius:2px;background:#222}
.tun-pic img,.tun-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tun-lab.in .tun-l,.tun-lab.in .tun-r{animation:tunIn .7s var(--ease) both}
@keyframes tunIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
.tun-hud{position:absolute;inset:0;pointer-events:none;color:var(--mute);font-size:10px}
.tun-hud>span{position:absolute}
.tun-hud b{font-weight:400;color:var(--ink);margin-left:8px}
.tun-hud .tl{left:var(--gut);top:74px}.tun-hud .tr{right:var(--gut);top:74px}
.tun-hud .bl{left:var(--gut);bottom:44px}.tun-hud .br{right:var(--gut);bottom:44px}
.tun-hud .bl b{margin:0}
.tun-hud .x{position:absolute;width:9px;height:9px;translate:-50% -50%;opacity:.35}
.tun-hud .x::before,.tun-hud .x::after{content:"";position:absolute;background:var(--mute)}
.tun-hud .x::before{left:4px;top:0;width:1px;height:9px}.tun-hud .x::after{top:4px;left:0;height:1px;width:9px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:700px){ .tun-lab{top:auto;bottom:86px;left:0;right:0;width:auto;height:auto;display:flex;justify-content:center;gap:10px;align-items:center} .tun-l,.tun-r{position:static;translate:none;font-size:14px} .tun-hit{position:fixed;left:0;right:0;width:auto;top:44vh;height:12vh} .tun-hud .tl,.tun-hud .tr{top:64px} .tun-hud .bl,.tun-hud .br{bottom:126px} }
body[data-tunnel] .top{z-index:70}
.tun-lab.gone{opacity:0!important;transition:opacity .2s}
/* pages arrive out of the paper the tunnel washes to */
/* the centre line opens up into the page: no wait, the page is already there and simply unfolds from the middle */
body[data-tunnel] #view:not([hidden]){animation:pageOpen .5s cubic-bezier(.7,0,.2,1) both;transform-origin:50% 50vh}
@keyframes pageOpen{from{clip-path:inset(46vh 0 calc(100% - 54vh) 0);transform:scale(1.03)}to{clip-path:inset(0 0 0 0);transform:none}}

/* the quick index rail */
.tun-rail{position:absolute;right:var(--gut);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:2px;z-index:3}
.tun-rail button{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:3px 0;color:var(--mute);font:inherit;letter-spacing:.06em}
.tun-rail b{font-weight:400;width:2.2ch;text-align:right;transition:color .3s}
.tun-rail .rn{font-family:var(--serif);font-size:15px;letter-spacing:-.01em;text-transform:none;opacity:0;translate:8px 0;transition:opacity .35s var(--ease),translate .35s var(--ease);white-space:nowrap;color:var(--ink)}
.tun-rail button:hover .rn{opacity:1;translate:0 0}
.tun-rail button:hover b,.tun-rail button.on b{color:var(--ink)}
.tun-rail button.on b::before{content:"";display:inline-block;width:14px;height:1px;background:var(--ink);vertical-align:middle;margin-right:8px;translate:0 -1px}
@media (max-width:700px){ .tun-rail{top:auto;bottom:150px;translate:none;left:var(--gut);right:var(--gut);flex-direction:row;justify-content:space-between} .tun-rail .rn{display:none} .tun-rail button.on b::before{display:none} .tun-rail button.on b{text-decoration:underline;text-underline-offset:4px} }

/* the switch between tunnel and list */
.tun-sw{position:absolute;right:var(--gut);bottom:44px;display:flex;align-items:center;gap:10px;color:var(--ink);letter-spacing:.08em;z-index:4}
.tun-sw i{position:relative;width:26px;height:14px;border:1px solid currentColor;border-radius:9px}
.tun-sw i::after{content:"";position:absolute;left:2px;top:2px;width:8px;height:8px;border-radius:50%;background:currentColor;transition:translate .45s var(--snap)}
.is-list .tun-sw i::after{translate:12px 0}
.tun-list{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s}
.is-list .tun-list{opacity:1;pointer-events:auto;transition-delay:.2s}
.tun-list a{position:absolute;left:calc(50% - var(--half));right:calc(50% - var(--half));display:block;cursor:pointer}
.tun-list .n{position:absolute;right:calc(var(--half) - var(--base) + 100% + 2vw);top:50%;translate:0 -50%;color:var(--mute)}
.tun-list .c{position:absolute;left:calc(var(--base) - var(--half) + 100% + 2vw);top:50%;translate:0 -50%;font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.15vw,18px);white-space:nowrap;color:var(--mute);transition:color .25s}
.tun-list a:hover .n{color:var(--ink)}
.is-list .tun-lab,.is-list .tun-rail{opacity:0!important;pointer-events:none;transition:opacity .3s}
.tun-rail,.tun-lab{transition:opacity .3s}
@media (max-width:700px){ .tun-sw{bottom:118px} .tun-list .c{display:none} .tun-list .n{right:calc(var(--half) - var(--base) + 100% + 8px)} }
.is-list .tun-hit{pointer-events:none!important}
body[data-tunnel] .top{mix-blend-mode:normal;z-index:1000}
body[data-tunnel] .brand{position:relative;z-index:1001}
/* over the colour flood the little numbers and clients turn white too */
.tun-list.hot .n,.tun-list.hot .c{color:rgba(255,255,255,.9)!important;transition:color .4s}
/* devour: the names become real letters you can eat one by one */
.tun-list .t{position:absolute;left:50%;top:50%;translate:-50% -45%;font:600 calc(var(--row) * var(--fsr,.6))/1 Geist,sans-serif;letter-spacing:-.045em;white-space:nowrap;color:var(--ink);opacity:0;pointer-events:none}
html.devouring .tun-list .t{opacity:1;pointer-events:auto}
.gone-ch{display:inline-block;transition:transform .35s cubic-bezier(.55,0,.8,.2),opacity .35s}
/* the index: a little moving picture from the hovered project, beside its line */
.tun-thumb{position:absolute;inset:0;pointer-events:none;z-index:3}
.tun-thumb .tt{position:absolute;left:0;top:0;width:clamp(120px,11vw,180px);aspect-ratio:16/10;overflow:hidden;border-radius:3px;opacity:0;transition:opacity .3s;will-change:transform}
.tun-thumb .tt.on{opacity:1}
.tun-thumb img,.tun-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.tun-thumb .stills img{position:absolute;inset:0;opacity:0;animation:cut calc(var(--n) * 1.2s) steps(1) infinite}
.tun-thumb .stills img:nth-child(2){animation-delay:1.2s}.tun-thumb .stills img:nth-child(3){animation-delay:2.4s}
.tun-thumb .stills[style*="--n: 2"] img{animation-name:cut2}
@keyframes cut{0%{opacity:1}33.3%,100%{opacity:0}}
@keyframes cut2{0%{opacity:1}50%,100%{opacity:0}}
html.devouring .tun-thumb,:not(.is-list)>.tun-thumb{display:none}
@media (hover:none){.tun-thumb{display:none}}
.tun-thumb .tt.tall{width:clamp(78px,6.5vw,112px)}

/* contact card: same paper, ink and voice as the index, still a physical card that tilts */
.ct-card{background:linear-gradient(160deg,#faf9f6 0%,#f3f2ee 100%);color:var(--ink);border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(12,12,12,.06),0 2px 4px rgba(60,55,40,.05),0 30px 60px -24px rgba(60,55,40,.28),0 70px 120px -50px rgba(60,55,40,.22)}
.ct-shine{background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.75),transparent 55%);mix-blend-mode:soft-light}
.ct-x{color:var(--ink);opacity:.35}
.ct-card .ct-n{font-family:var(--sans);font-stretch:100%;text-transform:none;font-weight:700;font-size:clamp(40px,6vw,76px);line-height:.9;letter-spacing:-.05em;display:inline-flex;align-items:flex-start;gap:.08em}
.ct-dot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--acc);margin-top:.12em}
.ct-card .ct-r{font-family:var(--serif);font-stretch:100%;font-weight:400;font-size:clamp(20px,2vw,27px);letter-spacing:-.01em;color:var(--mute);margin-top:12px}
.ct-card .ct-g{grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.ct-card .ct-g p{color:var(--mute);border-bottom:1px solid var(--line);text-transform:uppercase}
.ct-g p b{font-weight:400;color:var(--ink);margin-right:10px}
.ct-card .ct-g a,.ct-card .ct-g span{font-family:var(--sans);font-stretch:100%;font-weight:500;font-size:15px;letter-spacing:-.015em;line-height:1.65;color:var(--ink)}
.ct-g span em,.ct-g a i{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--mute);font-size:1.08em;margin-left:3px}
.ct-g span em{display:block;margin:-3px 0 8px;line-height:1.2;font-size:1.05em}
.ct-g a i{font-family:var(--sans);font-style:normal;font-size:.85em;color:var(--acc)}
.ct-card .ct-g a:hover{color:var(--acc)}
@media (max-width:820px){ .ct-card .ct-g{grid-template-columns:1fr} }
.tun-list a.torn .t{opacity:1;pointer-events:auto}
.tun-list .tl{display:inline-block}
.tun-list:hover a.torn:not(:hover) .t{color:#a3a29d;transition:color .3s}

/* the toys: the spider and the ship are one game, so they sit together as a face-off; feeding is its own thing */
.corner .duel{display:inline-flex;align-items:center;gap:12px;padding:6px 12px;margin:-6px -12px;border:1px solid var(--line);border-radius:40px}
.corner .vs{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:lowercase;color:var(--mute);line-height:1}
/* list / tunnel: both words, the one you're on in ink, sitting top centre */
.tun-sw{position:fixed!important;left:50%;right:auto!important;top:24px;bottom:auto!important;translate:-50% 0;z-index:60!important}
.tun-sw b{font-weight:400;color:var(--mute);transition:color .3s}
.tun-sw:hover b{color:var(--ink)}
.is-list .tun-sw b:first-child,:not(.is-list)>.tun-sw b:last-child{color:var(--ink)}
.tun-sw i::after{translate:0 0}
:not(.is-list)>.tun-sw i::after{translate:12px 0}
.is-list .tun-sw i::after{translate:0 0}
body.viewing .tun-sw{display:none}
@media (max-width:700px){ .corner .toys span,.corner .toys button{white-space:nowrap} .corner .pball span{display:none} .corner .duel{gap:8px;padding:6px 10px;margin:-6px -10px} .corner .eatb svg{display:none} }
.tun-sw{font-size:9px!important;gap:7px!important;letter-spacing:.06em!important;top:27px}
.tun-sw i{width:20px!important;height:11px!important}
.tun-sw i::after{left:2px!important;top:2px!important;width:5px!important;height:5px!important}
:not(.is-list)>.tun-sw i::after{translate:9px 0}

/* feeding: the whole page inverts to night, the creature layer (and real pictures) flip back so they keep their true colours */
html{transition:filter .6s ease}
html.devouring{filter:invert(1) hue-rotate(180deg)}
canvas.crawl,html img,html video{transition:filter .6s ease}
html.devouring canvas.crawl,html.devouring img,html.devouring video{filter:invert(1) hue-rotate(180deg)}
html.devouring,html.crawling,html.flying{--bg:#fff}
html.devouring,html.crawling,html.flying{filter:invert(1) hue-rotate(180deg) contrast(1.22)}
html.devouring canvas.crawl,html.devouring img,html.devouring video,html.crawling canvas.crawl,html.crawling img,html.crawling video,html.flying canvas.crawl,html.flying img,html.flying video{filter:contrast(.82) hue-rotate(180deg) invert(1)}

/* the splash: the name tiled wall to wall in Syne, ENTER in the seam; it lifts away like a sheet when you go in */
#splash{display:none}
html.splashing #splash{display:block}
#splash{position:fixed;inset:0;z-index:10000;background:#000;touch-action:none}
#splash.go{display:block!important;background:transparent;pointer-events:none}
#splash canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#splash .sp-enter{position:absolute;z-index:2;background:none;border:0;padding:0;color:transparent;font-size:1px;cursor:pointer}
#splash .sp-enter:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
#splash .sp-hint{position:absolute;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));translate:-50% 0;display:none;background:var(--bg);color:var(--ink);padding:5px 8px;border-radius:20px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
#splash.ask:not(.asked) .sp-hint{display:block}
html.splashing,html.splashing body{overflow:hidden}
html.splashing .cur{display:none}