/* page: a light warm grey under the lime hero, so the black pixel plates and strips stand out */
body{margin:0;background:#E4E2DC}
body:has(.site.dark){background:#0F0F0E}
.site{--bg:#E4E2DC;--ink:#121211;--muted:#5A5954;--dim:#807F79;--plate-ink:#4A4944;--rule:rgba(18,18,17,.18);--p1:#CFCCC4;--p2:#C7CBCD;--p3:#D9D2C7;--p4:#CBD0C5;--p5:#D3CFCC;--p6:#C9C6BD;--p7:#D0D3D4;transition:background-color .5s ease,color .5s ease}
.site.dark{--bg:#0F0F0E;--ink:#ECEBE7;--muted:#9C9B95;--dim:#6F6E69;--plate-ink:#A3A29C;--rule:rgba(236,235,231,.16);--p1:#262522;--p2:#21252A;--p3:#2A2620;--p4:#222822;--p5:#282425;--p6:#24231F;--p7:#25282A}
html{scroll-behavior:smooth}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--muted)}
.hero a,.hero a:hover{color:#121211}
.player .blend{mix-blend-mode:difference}
/* the lettering sits a little below the middle of the screen */
header.hero{padding-top:10svh}
art-director-header{display:block;--hero-height:90svh}
/* phones: the logo and the menu sit at the top (nav rules below); the lettering is centred in the lime under them */
@media (max-width:760px){header.hero{display:flex;flex-direction:column;justify-content:center;min-height:clamp(440px,64svh,580px);padding:176px 0 40px}art-director-header{--hero-height:0px}}
.seam{position:absolute;left:0;top:100%;width:100%;display:block;z-index:4;pointer-events:none}
.stage3d .hvid{opacity:0;transition:opacity 1.2s ease .6s}
.stage3d.no3d.open .hvid{opacity:1}
.stage3d canvas{transition:opacity .8s ease}
.stage3d.no3d canvas{opacity:0}
.stage3d .ctext{transition:opacity .6s ease,transform 1.4s cubic-bezier(.7,0,.18,1)}
.stage3d.open .ctext{opacity:0;transform:scale(.94)}
.stage3d .curtains:focus-visible{outline:2px solid #FFFFFF;outline-offset:-8px}
/* loader: on the hero's lime, a pixel bar with the hero's pocket double running along its edge and jokes under it */
.loader{position:fixed;inset:0;z-index:100;color:#121211;font-family:'Jersey 10','Courier New',monospace}
.loader .ld-half{position:absolute;top:0;bottom:0;width:50.5%;background:#E0FD2C;transition:transform 1.15s cubic-bezier(.7,0,.2,1) .3s}
.loader .ld-l{left:0}
.loader .ld-r{right:0}
.loader.done{pointer-events:none}
.loader.done .ld-l{transform:translateX(-101%)}
.loader.done .ld-r{transform:translateX(101%)}
.loader .ld-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s ease,transform .6s cubic-bezier(.7,0,.2,1)}
.loader.done .ld-in{opacity:0;transform:scale(.94)}
.loader .ld-run{position:relative;width:min(520px,calc(100vw - 64px));padding-top:72px}
/* the runner: two frames of the hero's pocket double side by side (14×16 each); it runs on CSS alone, so it moves before any script arrives */
.loader .ld-buddy{display:block;position:absolute;top:12px;left:-28px;width:56px;height:64px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAAA6UlEQVR42mNkQAPc3Fz/GbCAr1+/MTLgAcTqY0TXsFSmAKuB0U8mYDWAVH2MME0wDbsl1BgYGBgYXF/cwsqPfjIBrpkcfSzIrvHvvcrgz3AVxYXI/I3F2lh9QZI+bm6u/xvUq/7/3+L//8vHV/+5ubn+/9/ij4KRxTeoV/3n5ub6T64+RlyRTSvAAotw/17UIHk5x5qBgYGBQTzlKIr4xmJteEIgRx8TrvgRTzmKVRM6IFUfCyEDiQGk6GNioDNg+vr1GyMsTogBsPxErr6BKWnoWZYSpZHYvIqsDpceJmINJmQpJQ6lKQAAniXR2MusZ1UAAAAASUVORK5CYII=) 0 0/200% 100% no-repeat;image-rendering:pixelated;animation:ldrun .22s steps(2) infinite}
@keyframes ldrun{to{background-position:200% 0}}
.loader.full .ld-buddy{animation:none;background-position:0 0}
.loader .ld-bar{background:#0B0B0A;padding:4px;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px)}
.loader .ld-bar-in{background:#E0FD2C;padding:4px}
.loader .ld-fill{width:0;height:16px;background:#0B0B0A}
.loader .ld-cap{margin:24px 0 0;padding:0 16px;height:1.3em;font-size:30px;line-height:1.3;font-weight:400;letter-spacing:.03em;text-align:center;white-space:nowrap;font-variant-ligatures:none}
.loader .ld-cap-in{display:inline-block}
.loader .ld-cap-in.in{animation:ldcap .3s steps(4) both}
@keyframes ldcap{from{transform:translateX(120px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:600px){.loader .ld-run{padding-top:56px}.loader .ld-buddy{top:11px;left:-21px;width:42px;height:48px}.loader .ld-fill{height:12px}.loader .ld-cap{font-size:22px}}
@media (prefers-reduced-motion: reduce){.loader .ld-cap-in.in,.loader .ld-buddy{animation:none}}
.beamcv{filter:blur(14px);mix-blend-mode:screen}
.ldot{position:relative;display:inline-block}
.lens{position:absolute;left:50%;bottom:0.14em;width:7px;height:7px;margin-left:-3.5px;margin-bottom:-3.5px;border-radius:50%;background:#FFF8EC;opacity:0;transform:scale(.2);transition:opacity .6s ease .35s,transform .8s cubic-bezier(.34,1.56,.64,1) .35s;box-shadow:0 0 10px 3px rgba(255,244,222,.9),0 0 34px 12px rgba(190,215,255,.45),0 0 70px 26px rgba(255,190,230,.18)}
.lens.on{opacity:1;transform:scale(1);animation:lensp 2.6s ease-in-out .9s infinite}
@keyframes lensp{0%,100%{transform:scale(1);filter:hue-rotate(0deg)}50%{transform:scale(1.25);filter:hue-rotate(40deg)}}
.ab [data-r]{--p:1}
/* about: three big lime pixel numbers (hand-drawn glyphs, see pixelNumber in the build), 150+ the biggest and in the middle, each with a lime pixel key word over the rest of its caption */
.stats .st-trio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr);align-items:end;column-gap:clamp(8px,2.4vw,40px);row-gap:clamp(36px,6vw,56px);max-width:1400px;margin:0 auto}
.stats .st-it{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,26px);min-width:0;text-align:center}
.stats .st-num{display:block;width:auto;height:clamp(54px,7vw,112px);fill:var(--ink);shape-rendering:crispEdges;overflow:visible}
.stats .st-main .st-num{height:clamp(100px,14vw,224px)}
.stats .st-cap{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1;color:var(--ink)}
.stats .st-cap b{font:400 clamp(26px,3.4vw,48px)/.95 'Jersey 10','Courier New',monospace;letter-spacing:.03em;color:var(--ink);text-transform:uppercase;font-variant-ligatures:none}
.stats .st-cap span{font-size:clamp(11px,1.25vw,17px)}
.stats .st-main .st-cap b{font-size:clamp(38px,5.8vw,80px)}
.stats .st-main .st-cap span{font-size:clamp(14px,1.8vw,24px)}
@media (max-width:760px){.stats .st-trio{grid-template-columns:repeat(2,minmax(0,1fr))}.stats .st-main{grid-column:1 / -1;order:-1}}
.ab .ph{display:block}
.ab .fly{--q:clamp(0, calc(var(--p) * 1.6 - var(--fd, 0) * .22), 1);opacity:var(--q);filter:blur(calc((1 - var(--q)) * 18px));transform:translate(calc((1 - var(--q)) * var(--dx, 0px)), calc((1 - var(--q)) * var(--dy, 40px))) scale(calc(.9 + var(--q) * .1));will-change:transform,filter,opacity}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.htitle .wd{display:inline-block;white-space:nowrap}
.htitle .lt{display:inline-block;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.9,.25,1.25),color .3s ease;will-change:transform}
.htitle.hot .lt{transition-duration:.25s}
.nl{position:relative;display:inline-block;padding:8px 0}
.nl .scrib{position:absolute;left:-6%;bottom:-2px;width:112%;height:12px;overflow:visible;pointer-events:none}
.nl .scrib path{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.nl.drawn .scrib path{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.6,0,.2,1)}
.nl.erase .scrib path{stroke-dashoffset:-1;transition:stroke-dashoffset .35s cubic-bezier(.6,0,.4,1)}
.hcur{transform:translate3d(-300px,-300px,0);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.hcur-in{transform:translate(-50%,-50%) scale(0) rotate(-24deg);transition:transform .5s cubic-bezier(.34,1.7,.64,1)}
.hcur.on .hcur-in{transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
.hcur.on.down .hcur-in{transform:translate(-50%,-50%) scale(.84) rotate(3deg);transition-duration:.12s}
.hroll-track{animation:hroll 1.6s cubic-bezier(.76,0,.24,1) infinite}
@keyframes hroll{0%,45%{transform:translateY(0)}55%,100%{transform:translateY(-14px)}}
.hcur .ic-play{animation:hnudge 1.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes hnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.hcur .t-closed{display:flex}
.hcur .t-open,.hcur .ic-close{display:none}
.stage3d.open .hcur .t-closed,.stage3d.open .hcur .ic-play{display:none}
.stage3d.open .hcur .t-open{display:flex}
.stage3d.open .hcur .ic-close{display:inline}
@media (hover:hover) and (pointer:fine){.stage3d .curtains{cursor:none}}
@media (hover:none),(pointer:coarse){.hcur{display:none}}
@media (prefers-reduced-motion: reduce){.hroll-track,.hcur .ic-play{animation:none}}
@media (prefers-reduced-motion: reduce){.stage3d .ctext,.stage3d .hvid{transition-duration:.01s}}
.player .pbtn{transition:opacity .35s ease}
.player.is-playing .pbtn{opacity:0}
.player.is-playing:hover .pbtn,.player .pbtn:focus-within{opacity:1}
.hero a:focus-visible,.hero button:focus-visible{outline-color:#121211}
/* top menu: a compact black capsule centred over the lime hero, logo left, links right */
.hero .hnav{background:#0B0B0A;border-radius:999px;padding:10px 14px 10px 28px;left:50% !important;right:auto !important;transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:calc(100% - 32px);column-gap:56px !important}
.hero .hnav a,.hero .hnav a:hover{color:#ECEBE7}
.hero .hnav .nl{padding:8px 4px}
/* pixel look: stepped corners instead of a smooth curve, pixel font, a stepped lime underline */
.hero .hnav{border-radius:0;clip-path:polygon(16px 0,calc(100% - 16px) 0,calc(100% - 16px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 8px,calc(100% - 4px) 8px,calc(100% - 4px) 12px,calc(100% - 4px) 16px,100% 16px,100% calc(100% - 16px),calc(100% - 4px) calc(100% - 16px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 4px),calc(100% - 16px) calc(100% - 4px),calc(100% - 16px) 100%,16px 100%,16px calc(100% - 4px),8px calc(100% - 4px),8px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 12px),4px calc(100% - 16px),0 calc(100% - 16px),0 16px,4px 16px,4px 12px,4px 8px,8px 8px,8px 4px,16px 4px)}
.hero .hnav .nl{font-family:'Jersey 10','Courier New',monospace;font-size:21px;font-weight:400;letter-spacing:.04em}
.hero .hnav .nl .scrib{display:none}
.hero .hnav .nl::after{content:'';position:absolute;left:4px;right:4px;bottom:3px;height:3px;background:#E0FD2C;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s steps(6)}
.hero .hnav .nl:hover,.hero .hnav .nl:focus-visible{color:#E0FD2C}
.hero .hnav .nl:hover::after,.hero .hnav .nl:focus-visible::after{transform:scaleX(1)}
.hero .hnav a:focus-visible{outline-color:#E0FD2C}
.mono{font-family:'Archivo','Helvetica Neue',Helvetica,sans-serif;font-size:12px;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;font-weight:500;font-stretch:100%;font-variant-numeric:tabular-nums}
.disp{font-family:'Archivo','Arial Black','Helvetica Neue',sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.035em}
.serif{font-family:'Archivo','Helvetica Neue',Helvetica,sans-serif;font-stretch:125%;font-style:normal;font-weight:200;letter-spacing:-.04em;text-transform:none}
.brush{font-family:'Dx Burst','Caveat','Bradley Hand',cursive;font-weight:400;text-transform:uppercase;letter-spacing:0}
.play{font-family:'Dx Playhigh','Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0.01em}
.mtxt{font-family:'Archivo','Helvetica Neue',Helvetica,sans-serif;font-stretch:112%;font-weight:400;letter-spacing:-.01em}
.hand{font-family:'Caveat','Bradley Hand','Segoe Print',cursive;font-weight:600;letter-spacing:0;text-transform:none}
.wide{font-family:'Archivo','Helvetica Neue',Helvetica,sans-serif;font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:-.02em}
.track{animation:marquee 56s linear infinite}
.logo{opacity:.86;transition:opacity .3s ease}
.clogo{display:block;flex:none;background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain}
.logo:hover{opacity:1}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.rec{animation:blink 1.2s steps(1) infinite}
@keyframes rise{from{opacity:0;transform:translateY(110px)}to{opacity:1;transform:translateY(0)}}
@supports (animation-timeline: view()){
.rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
}
.tile{display:flex;flex-direction:column;color:var(--ink)}
.tile:hover{color:var(--ink)}
/* project tiles: corners stepped in 4 px pixels, like the menu; the zooming cover stays clipped */
.tile > div:first-child{position:relative;isolation:isolate;clip-path:polygon(16px 0,calc(100% - 16px) 0,calc(100% - 16px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 8px,calc(100% - 4px) 8px,calc(100% - 4px) 12px,calc(100% - 4px) 16px,100% 16px,100% calc(100% - 16px),calc(100% - 4px) calc(100% - 16px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 4px),calc(100% - 16px) calc(100% - 4px),calc(100% - 16px) 100%,16px 100%,16px calc(100% - 4px),8px calc(100% - 4px),8px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 12px),4px calc(100% - 16px),0 calc(100% - 16px),0 16px,4px 16px,4px 12px,4px 8px,8px 8px,8px 4px,16px 4px)}
@media (max-width:760px){.tile > div:first-child{clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px)}}
/* project name: a black pixel plate hanging over the cover's top-left corner (a one-line plate sticks out by about half; a taller one grows down over the cover); the title's quoted part big, the rest small and lime above it, all in the pixel face; lime on hover like the menu links */
.tile{position:relative;container-type:inline-size}
.tile .tname{position:absolute;left:-12px;top:-34px;z-index:2;display:flex;flex-direction:column;gap:6px;max-width:calc(100% - 8px);box-sizing:border-box;padding:12px 18px 14px;background:#0B0B0A;color:#ECEBE7;clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px);transition:background-color .3s steps(3),color .3s steps(3)}
.tile .tname small{font:400 18px/1 'Jersey 10','Courier New',monospace;letter-spacing:.04em;text-transform:uppercase;color:#E0FD2C;font-variant-ligatures:none;transition:color .3s steps(3)}
.tile .tname b{font:400 clamp(30px,8.6cqi,56px)/.9 'Jersey 10','Courier New',monospace;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;font-variant-ligatures:none}
.tile:hover .tname{background:#E0FD2C;color:#121211}
.tile:hover .tname small{color:#121211}
@media (max-width:760px){#work .g12{row-gap:64px !important}.tile .tname{left:-8px;top:-28px;padding:10px 14px 12px;gap:5px}.tile .tname small{font-size:15px}.tile .tname b{font-size:clamp(28px,10cqi,44px)}}
/* project facts: a black strip along the bottom of the cover, a pixel icon per fact (year, category, my role); it replaces the number and "View case" row */
.tile .tfacts{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-wrap:wrap;gap:8px 20px;padding:12px 16px;background:#0B0B0A;color:#ECEBE7;font:400 21px/1 'Jersey 10','Courier New',monospace;letter-spacing:.03em;text-transform:uppercase;font-variant-ligatures:none}
.tile .tfacts > span{display:flex;align-items:center;gap:8px;white-space:nowrap;transition:color .3s steps(3)}
.tile .tfacts svg{flex:none;width:24px;height:24px;fill:#E0FD2C;shape-rendering:crispEdges}
.tile:hover .tfacts > span{color:#E0FD2C}
.tile .plate .plate-top{display:none}
@media (max-width:760px){.tile .tfacts{font-size:17px;gap:6px 14px;padding:10px 12px}.tile .tfacts svg{width:18px;height:18px}}
.tile .plate{transition:transform 1.1s cubic-bezier(.16,.8,.24,1)}
.tile:hover .plate{transform:scale(1.035)}
.tile .go{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.tile:hover .go{opacity:1;transform:none}
.film-row .ft{transition:transform .5s cubic-bezier(.16,.8,.24,1),color .3s ease}
.film-row:hover .ft{transform:translateX(16px);color:var(--ink) !important}
.film-row .pm{transition:transform .6s cubic-bezier(.7,0,.2,1)}
.film-row[aria-expanded="true"] .pm{transform:rotate(45deg)}
.acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.7,0,.2,1)}
.acc.open{grid-template-rows:1fr}
.acc-clip{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .8s}
.acc.open .acc-clip{visibility:visible;transition-delay:0s}
.acc-in{opacity:0;transform:translateY(32px);transition:opacity .4s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.acc.open .acc-in{opacity:1;transform:none;transition-delay:.2s}
@media (prefers-reduced-motion: reduce){.acc,.acc-in,.film-row .pm{transition-duration:.01s !important}}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (max-width:760px){
.g12{grid-template-columns:minmax(0,1fr) !important;row-gap:48px !important}
.g12 > *{grid-column:1 / -1 !important;margin-top:0 !important}
.hide-sm{display:none !important}
.phr{margin-left:0 !important}
.film-row{grid-template-columns:44px minmax(0,1fr) auto 28px !important}
.film-row .col-tools,.film-row .col-dur{display:none !important}
}
@media (prefers-reduced-motion: reduce){.track,.rec,.rise{animation:none !important}}

/* ---- static-build additions ---- */
.player .ic-pause{display:none}
.player.is-playing .ic-pause{display:inline-flex}
.player.is-playing .ic-play{display:none}
.player .ic-play,.player .ic-pause{align-items:center;justify-content:center}
.loader.gone{display:none}

/* ---- CMS-driven additions ---- */
.tile .plate{position:relative}
.tile .plate .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* video covers fade in over their still once they actually play */
video.vcover.over{opacity:0;transition:opacity .6s ease}
video.vcover.over.on{opacity:1}
.pb-cover{position:relative}
.pb-cover video.vcover.over{position:absolute;inset:0;width:100%;height:100%}
.tile .plate .plate-top{position:relative}
.tile .plate.has-media .plate-top .mono{color:#FFFFFF !important;mix-blend-mode:difference}

/* project pages */
.project .pnav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;padding:24px 32px}
.project .g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:24px}
.phead{padding:clamp(64px,9vw,140px) 32px clamp(40px,5vw,72px);align-items:end}
.phead-no{grid-column:1 / span 3;align-self:start}
/* project titles in the pixel face, like the names on the work tiles */
.nb{white-space:nowrap}
.phead-title{grid-column:1 / -1;margin:0;font:400 clamp(52px,11vw,200px)/.86 'Jersey 10','Courier New',monospace;font-stretch:100%;letter-spacing:.01em;text-wrap:balance;font-variant-ligatures:none}
.phead-facts{grid-column:1 / -1;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:20px 64px;border-top:1px solid var(--rule);padding-top:20px}
.phead-facts div,.pb-credits div{display:flex;flex-direction:column;gap:4px}
.phead-facts dd,.pb-credits dd{margin:0}
.pb{margin:0;padding:0 32px clamp(56px,7vw,112px)}
.pb img,.pb video{display:block;width:100%;height:auto;background:var(--p1)}
.pb figcaption{margin-top:14px;color:var(--muted)}
.pb-cover .cover{display:block;width:100%;height:auto;max-height:92vh;object-fit:cover}
.pb-intro{align-items:start}
.pb-lead{grid-column:4 / span 6;margin:0;font-size:clamp(20px,2vw,30px);line-height:1.35;letter-spacing:-.015em;text-wrap:pretty}
.pb-credits{grid-column:10 / span 3;margin:0;display:flex;flex-direction:column;gap:18px}
.pb-text{align-items:start}
.pb-h{grid-column:1 / span 3}
.pb-h h2{margin:0;font-size:12px}
.pb-body{grid-column:4 / span 6;font-size:clamp(16px,1.35vw,19px);line-height:1.6;text-wrap:pretty}
.pb-body > :first-child{margin-top:0}
.pb-body > :last-child{margin-bottom:0}
.pb-body a{text-decoration:underline;text-underline-offset:3px}
.pb-body h3{font-stretch:125%;font-weight:700;font-size:1.25em;line-height:1.2;margin:1.6em 0 .6em}
.pb-image.inset{padding-left:calc(32px + (100% - 64px + 20px) / 12 * 2);padding-right:calc(32px + (100% - 64px + 20px) / 12 * 2)}
.pb-grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:20px;align-items:start}
.pb-embed{position:relative;aspect-ratio:16 / 9;background:#000}
.pb-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pb-quote{padding-left:calc(32px + (100% - 64px + 20px) / 12 * 3);padding-right:calc(32px + (100% - 64px + 20px) / 12 * 2)}
.pb-quote p{margin:0;font-size:clamp(28px,3.6vw,56px);line-height:1.08}
.pb-quote cite{display:block;margin-top:20px;font-style:normal;color:var(--muted)}
.pnext{display:flex;flex-direction:column;gap:14px;padding:clamp(56px,7vw,112px) 32px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pnext-title{font:400 clamp(46px,9vw,160px)/.88 'Jersey 10','Courier New',monospace;font-stretch:100%;letter-spacing:.01em;font-variant-ligatures:none;transition:transform .6s cubic-bezier(.16,.8,.24,1)}
.pnext:hover{color:var(--ink)}
.pnext:hover .pnext-title{transform:translateX(24px)}
.bigmail{overflow-wrap:anywhere}
@media (max-width:760px){
.project .pnav{padding:20px 16px}
.phead,.pb,.pnext{padding-left:16px;padding-right:16px}
.pb-image.inset,.pb-quote{padding-left:16px;padding-right:16px}
.pb-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
}

/* 3D title: the hero letters and the tagline sign live in the three.js scene; the HTML
   h1 stays for screen readers and as the fallback when WebGL is unavailable. */
.stage3d.title3d:not(.no3d) .htitle .play,.stage3d.title3d:not(.no3d) .tagline{visibility:hidden}

/* the hero melts into the page: seats fade out instead of being cut by the next block */


/* the projector beam starts from the dot of the "i" in the logo */
.ldot-i .lens{bottom:0.73em}
@media (max-width:760px){
/* phones: the logo sits on the lime above the menu; only the links are in the black pixel capsule */
.hero nav.hnav{justify-content:center !important;text-align:center;padding:0;top:20px !important;background:none;clip-path:none;row-gap:12px !important;width:calc(100% - 32px)}
.hero nav.hnav > a,.hero nav.hnav > a:hover{color:#121211}
.hero nav.hnav > div{justify-content:center;background:#0B0B0A;clip-path:polygon(16px 0,calc(100% - 16px) 0,calc(100% - 16px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 8px,calc(100% - 4px) 8px,calc(100% - 4px) 12px,calc(100% - 4px) 16px,100% 16px,100% calc(100% - 16px),calc(100% - 4px) calc(100% - 16px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 4px),calc(100% - 16px) calc(100% - 4px),calc(100% - 16px) 100%,16px 100%,16px calc(100% - 4px),8px calc(100% - 4px),8px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 12px),4px calc(100% - 16px),0 calc(100% - 16px),0 16px,4px 16px,4px 12px,4px 8px,8px 8px,8px 4px,16px 4px);padding:8px 20px;column-gap:22px !important}
}

/* responsive images: <picture> is transparent for layout, the <img> keeps the old styling */
picture.rp{display:contents}
.pb img{height:auto}
.pb-cover .cover{height:auto}
.portrait-img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.tile .plate.has-m{aspect-ratio:var(--ar-m) !important}}
/* image + text block */
.pb-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:center}
.pb-split.img-right .ps-img{order:2}
.pb-split .ps-text h2{margin:0 0 18px;font-size:12px}
@media (max-width:760px){.pb-split{grid-template-columns:minmax(0,1fr)}.pb-split.img-right .ps-img{order:0}}

/* ---- Russian pages (/ru/): Archivo has no Cyrillic, Montserrat takes its place; it has no width axis, so font-stretch does nothing there.
   The pixel titles and the nurgazinov.com logo keep their own fonts. */
html[lang="ru"] .mono,html[lang="ru"] .serif,html[lang="ru"] .mtxt,html[lang="ru"] .wide{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif}
html[lang="ru"] .disp:not(.phead-title):not(.pnext-title):not(.brand){font-family:'Montserrat','Arial Black','Helvetica Neue',sans-serif;letter-spacing:-.03em}
html[lang="ru"] .serif{letter-spacing:-.03em}

/* ---- language switch EN / RU: a small black plate of its own, apart from the menu;
   in the hero's top-right corner (under the menu on phones) and at the end of the project page bar */
.lsw{display:flex;align-items:center;gap:4px;padding:8px;background:#0B0B0A;clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px)}
.lsw a{padding:6px 8px 5px;font:400 21px/1 'Jersey 10','Courier New',monospace;letter-spacing:.06em;color:#9C9B95;text-decoration:none;font-variant-ligatures:none;transition:color .2s steps(2),background-color .2s steps(2)}
.lsw a:hover,.lsw a:focus-visible{color:#E0FD2C}
.lsw a[aria-current]{background:#E0FD2C;color:#0B0B0A}
.lsw a:focus-visible{outline:2px solid #E0FD2C;outline-offset:2px}
.hero > .lsw{position:absolute;top:24px;right:32px;z-index:5;height:65px;box-sizing:border-box;padding:0 12px}
/* phones: the logo on the left and the switch on the right of one row, the menu capsule full width under them */
@media (max-width:760px){
.hero nav.hnav{row-gap:18px !important}
.hero nav.hnav > a{margin-right:auto}
.hero nav.hnav > div{width:100%;box-sizing:border-box}
.hero > .lsw{top:11px;right:16px;height:auto;padding:6px}
.lsw a{font-size:19px;padding:5px 7px 4px}
}
.project .pnav > div{margin-left:auto}
@media (max-width:760px){.project .pnav > .lsw{order:1;margin-left:auto}.project .pnav > div{order:2;flex-basis:100%;margin-left:0}}