/* experimental (the redesign branch, started 2026-10-30): the films as one field of moving tiles, after wanda.net.
   The hero and the two film sections stay in the page (their code and search text keep working) but are not shown;
   the field takes their place at the top. Everything for this lives in media/field/. */

:root{--x-bg:#000;--x-bgrgb:0 0 0;--x-rgb:255 255 255;--fxbg:var(--x-bg);--fxmono:"Untitled Sans","Helvetica Neue",Helvetica,Arial,sans-serif}
/* one background everywhere (Andrija, 2026-10-31): pitch black; the light look is the site's paper. Every colour below follows the Dark / Light switch */
:root:not([data-pf="light"]){--bg:#000;--field:#000}
:root[data-pf="light"]{--x-bg:#f1f0ec;--x-bgrgb:241 240 236;--x-rgb:18 18 17}
html,body{background:var(--x-bg)}   /* the monospace tried first was not liked: Untitled Sans Light instead (Andrija, 2026-10-30) */
#hero,.peekbar,main > .page > section.sec[data-sec="films"]{display:none!important}
body{background:var(--fxbg)}

/* ---------- the field ---------- */
.fx{position:relative;background:var(--fxbg)}
.fx-tiles{position:relative;width:100%;overflow:hidden}
.fx-i{position:absolute;display:block;opacity:0;transition:opacity 1.1s cubic-bezier(.16,1,.3,1)}
.fx-i.in{opacity:1}
.fx-t{position:absolute;inset:0;display:block;color:rgb(var(--x-rgb));text-decoration:none;will-change:transform;-webkit-tap-highlight-color:transparent;cursor:pointer}
/* the cursor over a tile (Andrija, 2026-10-30: no circle around it): a small red dot by default; ?cursor=play for the white play triangle alone */
html:not([data-cur="play"]) .fx-t{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%23e2231a'/%3E%3C/svg%3E") 8 8,pointer}
html[data-cur="play"] .fx-t{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M9 6.5v15l12-7.5z' fill='%23fff' stroke='rgba(0,0,0,.35)' stroke-width='1'/%3E%3C/svg%3E") 12 14,pointer}
.fx-m{position:absolute;inset:0;overflow:hidden;background:#000;opacity:.75;transition:opacity .4s ease-out}
.fx-m img,.fx-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-m video{opacity:0;transition:opacity .5s}
/* streamed tiles use the page's thumbnail player: in colour like the rest of the field, and over the still once playing */
.fx-m.media > img,.fx-m.media > video,.fx-m.media > .stream{filter:none!important}
.fx-m.media{position:absolute;inset:0}
.fx-m video.on{opacity:1}
.fx-t:hover .fx-m,.fx-t:focus-visible .fx-m,.fx-t.near .fx-m{opacity:1}
.fx-t:focus-visible{outline:1px solid rgb(var(--x-rgb));outline-offset:4px}
/* the label: the client in monospace, the title in the display face, centred on the tile */
.fx-lab{position:absolute;left:50%;top:50%;z-index:3;margin:0;transform:translate3d(-50%,-50%,0);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s linear .2s;
  background:var(--x-bg);padding:0 .3em;line-height:1.02}   /* a black strip under the words, like a highlighter, so they read over any picture (Andrija, 2026-10-30) */
.fx-t:hover .fx-lab,.fx-t:focus-visible .fx-lab,.fx-t.near .fx-lab{opacity:1;visibility:visible;transition:opacity .2s ease-out,visibility 0s}
.fx-c{font-family:var(--fxmono);font-weight:300;font-size:clamp(15px,1.55vw,26px);letter-spacing:-.02em;color:rgb(var(--x-rgb) / .62);margin-right:.4em}
.fx-ti{font-weight:500;font-size:clamp(15px,1.55vw,26px);letter-spacing:-.03em}
@media (max-width:760px){.fx-lab{display:none}}
@media (prefers-reduced-motion:reduce){.fx-i{transition:none;opacity:1}}

/* ---------- header: the same system as the traditional site (Andrija, 2026-10-30) ----------
   At the top, the large Panorama globe that turns its meridian toward the pointer; once the field starts to move it gives
   way to the Panorama Films wordmark (field.js sets .compact from the field's own scroll). The nav on the right, as on the
   site: Work · Index · About · Contact. The Rec counter is left out. */
.hdr .hdr-rec{display:none!important}
.hdr.x2-over::before{display:none!important}                    /* over the field the header is bare, as on wanda.net; further down it keeps its shade */
.hdr.x2-over .wm{color:rgb(var(--x-rgb))}

/* ---------- the index, after wanda.net's Directors: every project in four columns over the dimmed field ---------- */
.x2-ix{position:fixed;inset:0;z-index:58;background:rgb(var(--x-bgrgb) / .76);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:rgb(var(--x-rgb));overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .45s ease-out,visibility 0s linear .45s}
.x2-ix.on{opacity:1;visibility:visible;transition:opacity .45s ease-out,visibility 0s}
.x2-ix-x{position:fixed;top:clamp(18px,2vw,30px);right:var(--m);z-index:3;font-family:var(--fxmono);font-weight:300;font-size:clamp(14px,1.1vw,17px);color:rgb(var(--x-rgb));background:none;border:0;cursor:pointer;opacity:.8}
.x2-ix-x:hover{opacity:1}
.x2-ix-in{position:relative;z-index:2;padding:clamp(110px,15vh,170px) clamp(24px,8vw,125px) 80px clamp(24px,10.5vw,160px)}
.x2-tabs{display:flex;gap:40px}
.x2-tabs button,.x2-g a{font-family:var(--fxmono);font-weight:300;font-size:clamp(15px,1.2vw,18px);line-height:1.17;letter-spacing:-.01em;color:rgb(var(--x-rgb));background:none;border:0;padding:0;opacity:.6;transition:opacity .2s linear;text-decoration:none;cursor:pointer}
.x2-tabs button[aria-selected="true"],.x2-tabs button:hover{opacity:1}
.x2-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(24px,4vw,80px);margin:30px 0 0;padding:0;list-style:none}
.x2-g li{margin-bottom:10px;min-width:0}
.x2-g a{position:relative;display:inline;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:transparent;transition:opacity .2s linear,text-decoration-color .2s linear}
.x2-g a:hover,.x2-g a:focus-visible,.x2-g a.on{opacity:1}
.x2-g a:hover,.x2-g a:focus-visible{text-decoration-color:currentColor}
.x2-g[hidden]{display:none}
@media (max-width:1600px){.x2-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.x2-g{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.x2-g{grid-template-columns:1fr}.x2-ix-in{padding-top:96px}}
/* the clip that floats by the name under the pointer */
.x2-pv{position:fixed;left:0;top:0;z-index:1;width:35vw;aspect-ratio:16/9;pointer-events:none;opacity:0;visibility:hidden;background:#000;transition:opacity .25s,visibility 0s linear .25s}
.x2-pv.on{opacity:1;visibility:visible;transition:opacity .25s,visibility 0s}
.x2-pv::before{content:"";position:absolute;inset:0;z-index:2;background:#000;opacity:.3}
.x2-pv img,.x2-pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (hover:none),(pointer:coarse){.x2-pv{display:none}}

/* ---------- the project page in the same voice: monospace controls, a fade in after the field fades out ---------- */
.lb{background:var(--fxbg)}
.lb-bar .lab,.lb-ctl,.lb-ctl .lab,#c-tc,.lb-side-t{font-family:var(--fxmono)!important;font-weight:300!important;letter-spacing:-.01em!important;text-transform:none!important}

/* ======================= 2026-10-30, round 3 ======================= */
/* the rest of the old page is hidden on this branch; the three approaches (?rest=a|b|c) take its place */
main > .page{display:none!important}

/* wanda.net scrolling on computers: the page stands still, the field is a fixed window and every tile moves on its own spring */
html.x2-vs,html.x2-vs body{overflow:hidden;height:100%;overscroll-behavior:none}
html.x2-vs .fx{position:fixed;inset:0;z-index:1;overflow:hidden}
html.x2-vs .fx-t,html.x2-vs .x2-rest [data-x2b]{will-change:transform}

/* tiles that are not films: no play cursor, no link */
.x2-st{cursor:default!important}
.x2-pt .fx-m img{filter:grayscale(1) contrast(1.05)}
.x2-pt:hover .fx-m img{filter:grayscale(1) contrast(1.05) brightness(1.08)}
.x2-tx .fx-m{display:none}
.x2-tx .fx-t{color:rgb(var(--x-rgb));font-family:var(--fxmono);font-weight:300}
.x2-chap-t{margin:0;font-size:clamp(64px,9.5vw,170px);font-weight:300;letter-spacing:-.055em;line-height:.9}
.x2-say p{margin:0;font-size:clamp(22px,2.5vw,46px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.x2-make p,.x2-for p{margin:0;font-size:clamp(16px,1.3vw,22px);line-height:1.3;letter-spacing:-.015em}
.x2-for p:not(.x2-k){font-size:clamp(14px,1.05vw,18px);color:rgb(var(--x-rgb) / .75)}
.x2-for a,.cr-two a,.pn-l a{color:inherit;text-decoration:none}
.x2-for a:hover,.cr-two a:hover,.pn-l a:hover{color:rgb(var(--x-rgb));text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.x2-k,.pn-k{margin:0 0 .8em!important;font-size:clamp(11px,.8vw,13px)!important;letter-spacing:.14em!important;text-transform:uppercase;color:rgb(var(--x-rgb) / .5)}
.x2-ask-t{margin:0;font-size:clamp(34px,5vw,92px);letter-spacing:-.045em;line-height:1}
.x2-links,.cr-links,.pn-links{display:flex;gap:1.4em;flex-wrap:wrap;margin:1.1em 0 0;font-size:clamp(16px,1.3vw,22px)}
.x2-links a,.cr-links a,.pn-links a{color:rgb(var(--x-rgb));text-decoration:underline;text-decoration-color:rgb(var(--x-rgb) / .35);text-underline-offset:.22em;text-decoration-thickness:1px}
.x2-links a:hover,.cr-links a:hover,.pn-links a:hover{color:var(--red,#e2231a);text-decoration-color:currentColor}
.x2-pl,.cr-pl,.pn-pl{margin:1.2em 0 0;color:var(--red,#e2231a);font-size:clamp(15px,1.1vw,19px)}
.x2-tx.x2-ask .fx-t{display:flex;flex-direction:column;justify-content:center}
.x2-tx .fx-t,.x2-tx{opacity:1}
@media (max-width:760px){
  .x2-pt .fx-lab{display:block;opacity:1;visibility:visible;left:8px;top:auto;bottom:8px;transform:none;font-size:13px}
  .x2-pt .fx-lab .fx-c,.x2-pt .fx-lab .fx-ti{font-size:13px}
}

/* ---------- b: end credits ---------- */
.x2-cr{position:relative;padding:30vh var(--m) 34vh;color:rgb(var(--x-rgb));text-align:center;font-family:var(--fxmono);font-weight:300}
.x2-cr [data-x2b]{position:relative}
.cr-mark{margin:0 0 5vh;font-family:"Untitled Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;font-size:clamp(28px,3vw,52px);letter-spacing:-.04em}
.cr-mark sup{font-size:.4em;font-weight:400;vertical-align:1.3em;margin-left:.08em}
.cr-dot{display:inline-block;width:.28em;height:.28em;border-radius:50%;background:var(--red,#e2231a);margin-right:.25em;vertical-align:.14em;animation:blink 1s steps(1,end) infinite}
.cr-say{max-width:30ch;margin:0 auto 16vh;font-size:clamp(20px,1.9vw,32px);line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.cr-h{margin:14vh 0 3.5vh;font-size:clamp(11px,.8vw,13px);font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--x-rgb) / .5)}
.cr-r{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(16px,1.6vw,28px);align-items:baseline;max-width:980px;margin:0 auto;padding:.3em 0;font-size:clamp(16px,1.25vw,21px);letter-spacing:-.01em}
.cr-role{text-align:right;color:rgb(var(--x-rgb) / .5)}
.cr-n{text-align:left;color:rgb(var(--x-rgb));font-weight:400}
.cr-two .cr-n:first-child{text-align:right;color:rgb(var(--x-rgb) / .85)}
.cr-two .cr-n:last-child{color:rgb(var(--x-rgb) / .85)}
.cr-c{margin:0;padding:.3em 0;font-size:clamp(16px,1.25vw,21px)}
[data-pp]{cursor:default}
[data-pp]:hover .cr-n,[data-pp]:hover > span:first-child{color:var(--red,#e2231a)}
.cr-pl{margin-top:16vh}
.cr-end{margin-top:26vh}
.cr-ask{margin:0;font-size:clamp(40px,6vw,112px);letter-spacing:-.05em;line-height:1}
.cr-ask a{color:rgb(var(--x-rgb));text-decoration:none}
.cr-ask a:hover{color:var(--red,#e2231a)}
.cr-links{justify-content:center}
@media (max-width:760px){.cr-r{font-size:15px;column-gap:12px}.cr-say{margin-bottom:10vh}.cr-h{margin-top:10vh}}

/* ---------- a: panels ---------- */
.pn-say{max-width:24ch;margin:0 0 7vh;font-family:var(--fxmono);font-weight:300;font-size:clamp(28px,3.3vw,60px);letter-spacing:-.04em;line-height:1.05}
.pn-core{display:grid;grid-template-columns:repeat(3,minmax(0,230px));gap:clamp(10px,1.2vw,20px)}
.pn-pt{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#000}
.pn-pt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.pn-pt figcaption{position:absolute;left:8px;bottom:8px;background:var(--x-bg);padding:0 .3em;line-height:1.05;white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
.pn-pt .fx-c,.pn-pt .fx-ti{font-size:clamp(12px,.95vw,15px)}
.pn-cols{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:clamp(24px,4vw,72px);margin-top:9vh;align-items:start}
.pn-l{list-style:none;margin:0;padding:0;font-family:var(--fxmono);font-weight:300;font-size:clamp(14px,1.1vw,18px);line-height:1.55;color:rgb(var(--x-rgb) / .75)}
.pn-l li:hover{color:rgb(var(--x-rgb))}
.pn-r{color:rgb(var(--x-rgb) / .4)}
.pn-ask{margin:0;font-family:var(--fxmono);font-weight:300;font-size:clamp(40px,6.4vw,120px);letter-spacing:-.05em;line-height:1}
.pn-ask a{color:rgb(var(--x-rgb));text-decoration:none}
.pn-ask a:hover{color:var(--red,#e2231a)}
@media (max-width:900px){.pn-cols{grid-template-columns:1fr}.pn-core{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* the floating picture: above every panel; a portrait is smaller and in black and white */
.x2-pv{z-index:59}
.x2-pv.x2-pv-p{width:clamp(150px,13vw,230px);aspect-ratio:4/5}
.x2-pv.x2-pv-p::before{opacity:0}
.x2-pv.x2-pv-p img{filter:grayscale(1) contrast(1.05)}

/* the switch between the three approaches (an experiment control) */
.x2-sw{position:fixed;left:var(--m);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:57;display:flex;gap:.9em;align-items:baseline;padding:.35em .6em;background:var(--x-bg);font-family:var(--fxmono);font-weight:300;font-size:12px;color:rgb(var(--x-rgb) / .45)}
.x2-sw a{color:rgb(var(--x-rgb) / .6);text-decoration:none}
.x2-sw a:hover{color:rgb(var(--x-rgb))}
.x2-sw a[aria-current]{color:rgb(var(--x-rgb))}
.x2-sw a[aria-current]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red,#e2231a);margin-right:.4em;vertical-align:.1em}
@media (max-width:760px){.x2-sw span{display:none}.x2-sw{font-size:11px}}

/* ======================= B1 / B2: the credits in columns, in the old site's type (2026-10-30) ======================= */
.x2-cr2{--cw:min(1240px,calc(100vw - 2 * var(--m)));position:relative;padding:26vh 0 32vh;color:rgb(var(--x-rgb));font-family:"Untitled Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}
.x2-cr2 .cr2-g{position:relative;width:var(--cw);margin:0 auto 20vh}
.x2-cr2 .cr2-g:last-child{margin-bottom:0}
/* the old site's details: Data Error codes, grey/white code lines, the red block cursor, Rec with the visit's timecode */
.x2-code{font-family:"Data Error Horiz",ui-monospace,monospace;font-size:clamp(11px,.85vw,14px);letter-spacing:.2em;color:rgb(var(--x-rgb) / .58);white-space:nowrap}
.x2-ln{margin:0;font-size:clamp(14px,1.05vw,17px);line-height:1.4;font-variant-numeric:tabular-nums}
.x2-ln .k{color:rgb(var(--x-rgb) / .45)}
.x2-ln .v{color:rgb(var(--x-rgb))}
.x2-cur{display:inline-block;width:.55em;height:1.05em;margin-left:.3em;vertical-align:-.15em;background:var(--red,#e2231a);animation:hlBlink 1.1s steps(1) infinite}
@keyframes hlBlink{50%{opacity:0}}
.x2-rec{display:inline-flex;align-items:center;gap:.5em;font-size:clamp(11px,.8vw,13px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--x-rgb))}
.x2-rd{width:8px;height:8px;border-radius:50%;background:var(--red,#e2231a);animation:blink 1s steps(1,end) infinite}
.x2-tc{font-family:var(--mono,ui-monospace,monospace);font-weight:400;letter-spacing:.04em;color:rgb(var(--x-rgb) / .4);font-variant-numeric:tabular-nums}
.cr2-say{margin:0;max-width:22ch;font-size:clamp(30px,3.4vw,62px);letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.cr2-cols{list-style:none;margin:0;padding:0;display:grid;column-gap:clamp(20px,2.4vw,44px);row-gap:clamp(14px,1.4vw,22px)}
.cr2-cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cr2-cols li{display:flex;flex-direction:column;gap:.15em;min-width:0}
.cr2-n{font-size:clamp(17px,1.4vw,24px);font-weight:400;letter-spacing:-.02em;color:rgb(var(--x-rgb))}
.cr2-r{font-size:clamp(11px,.8vw,13px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--x-rgb) / .45)}
[data-pp]:hover .cr2-n{color:var(--red,#e2231a)}
.cr2-make{list-style:none;margin:0;padding:0}
.cr2-make li{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,28px);padding:.18em 0;border-top:1px solid rgb(var(--x-rgb) / .12);font-size:clamp(26px,2.8vw,50px);letter-spacing:-.04em;line-height:1.1}
.cr2-make li:last-child{border-bottom:1px solid rgb(var(--x-rgb) / .12)}
.cr2-no{flex:none;width:2.2em;font-family:"Data Error Horiz",ui-monospace,monospace;font-size:clamp(11px,.85vw,14px);letter-spacing:.2em;color:rgb(var(--x-rgb) / .42)}
.cr2-make li:hover .cr2-no{color:var(--red,#e2231a)}
.cr2-cl li{font-size:clamp(15px,1.15vw,19px);color:rgb(var(--x-rgb) / .75)}
.cr2-cl a,.cr2-cl span{color:inherit;text-decoration:none}
.cr2-cl a:hover{color:rgb(var(--x-rgb));text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.cr2-ask{margin:.25em 0 0;font-size:clamp(44px,6.4vw,124px);letter-spacing:-.055em;line-height:.98}
.cr2-ask a{color:rgb(var(--x-rgb));text-decoration:none}
.cr2-ask a:hover{color:var(--red,#e2231a)}
.cr2-ask .x2-cur{height:.8em;width:.35em;vertical-align:-.05em}
.cr2-links{display:flex;gap:1.6em;flex-wrap:wrap;margin:1.2em 0 0;font-size:clamp(16px,1.25vw,21px)}
.cr2-links a{color:rgb(var(--x-rgb));text-decoration:underline;text-decoration-color:rgb(var(--x-rgb) / .35);text-underline-offset:.22em;text-decoration-thickness:1px}
.cr2-links a:hover{color:var(--red,#e2231a);text-decoration-color:currentColor}

/* B1: a label column (codes) and the content beside it, on the 12-column grid */
.x2-b1 .cr2-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g,24px)}
.x2-b1 .cr2-l{grid-column:1/span 3;padding-top:.45em}
.x2-b1 .cr2-b{grid-column:4/-1;min-width:0}
.x2-b1 .cr2-meta{display:flex;gap:2.2em;align-items:center;flex-wrap:wrap;margin:1.6em 0 0}
.x2-b1 .cr2-pl{color:var(--red,#e2231a);font-size:clamp(14px,1.05vw,17px)}
.x2-b1 .cr2-cmd{margin-bottom:.6em}

@media (max-width:760px){
  .x2-cr2 .cr2-g{margin-bottom:14vh}
  .x2-b1 .cr2-l,.x2-b1 .cr2-b{grid-column:1/-1}
  .x2-b1 .cr2-l{margin-bottom:1.2em;padding-top:0}
  .cr2-cols.c3,.cr2-dots.c2{grid-template-columns:1fr 1fr}
  .cr2-dots .cr2-r{flex:1 1 auto;white-space:normal}
  .cr2-dots .cr2-lead{display:none}
  .cr2-dots li{flex-direction:column;gap:.1em}
  .cr2-dots .cr2-n{text-align:left}
}
@media (prefers-reduced-motion:reduce){.x2-cur,.x2-rd{animation:none}}


/* ======================= 2026-10-30, later: progress bar, logos, the Collective's List / Graph ======================= */
/* a thin red bar along the top: how far down the page you are */
.x2-prog{position:fixed;left:0;top:0;right:0;height:2px;z-index:31;background:var(--red,#e2231a);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.lb:not([hidden]) ~ .x2-prog{display:none}

/* client logos, as in the site's strip: the authentic files as masks, grey, white under the pointer, red when they open a film */
.x2-logos{--u:clamp(54px,4.4vw,84px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;justify-items:start;gap:clamp(30px,3.2vw,56px) clamp(18px,2vw,36px)}
.x2-lg{display:block;width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));max-width:100%;background:rgb(var(--x-rgb) / .55);-webkit-mask:var(--src) left center/contain no-repeat;mask:var(--src) left center/contain no-repeat;transition:background-color .25s}
.x2-lg:hover,.x2-lg:focus-visible{background:rgb(var(--x-rgb))}
.x2-lg.ln:hover,.x2-lg.ln:focus-visible{background:var(--red,#e2231a)}
.x2-lg.lt{width:auto;height:auto;background:none;-webkit-mask:none;mask:none;color:rgb(var(--x-rgb) / .55);font-size:clamp(13px,1vw,16px);font-weight:500;letter-spacing:-.01em;text-transform:uppercase;text-decoration:none}
.x2-lg.lt:hover{color:rgb(var(--x-rgb))}
.x2-lg.lt.ln:hover{color:var(--red,#e2231a)}
.cr-logos{display:flex;flex-wrap:wrap;justify-content:center;max-width:1100px;margin:0 auto}
.cr-logos .x2-lg{-webkit-mask-position:center;mask-position:center}
.pn-logos{--u:clamp(40px,3vw,60px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.x2-logos{grid-template-columns:repeat(3,minmax(0,1fr));--u:56px}}

/* B1: the Collective is the site's own List / Graph, moved in from the hidden About section */
.x2-b1.has-peers .cr2-coll{display:none}
.cr2-peers .peers{margin:0}
.cr2-peers .lede.coll{display:none}
.cr2-peers .net-view{justify-content:flex-start}
.cr2-peers .net-names{padding-left:0;margin-top:clamp(24px,3vw,40px)}
.cr2-peers .net-wrap{margin-inline:0}
.cr2-peers .net-hint{margin-left:0;width:100%;text-align:left}
.cr2-peers .net-dr{right:0}
.cr2-peers{position:relative;z-index:0;isolation:isolate}   /* the graph sits at z-index -1: keep it in front of the page's black, on phones too */

/* ======================= 2026-10-30, late ======================= */
/* the Collective's List / Graph switch without its pictograms; the profile opens on the right, beside the names, not over them */
.cr2-peers .net-view svg,.cr2-peers .net-view .vi{display:none}
@media (min-width:761px){
  .cr2-peers .net-dr{left:auto!important;right:0!important;width:min(360px,36%)!important}
  .cr2-peers .net-names{padding-right:calc(min(360px,36%) + 24px)}
}

/* Human in the loop, discreet: a strip of thin ticks, one per photo; a photo only while pointing at it */
.x2-strip{display:flex;align-items:stretch;gap:2px;height:36px;margin:1.1em 0 .7em;cursor:crosshair;touch-action:none;outline-offset:6px}
.x2-strip i{flex:1 1 0;min-width:1px;max-width:6px;background:rgb(var(--x-rgb) / .22);transition:background-color .15s,transform .15s;transform-origin:50% 100%}
.x2-strip:hover i{background:rgb(var(--x-rgb) / .3)}
.x2-strip i.on{background:var(--red,#e2231a);transform:scaleY(1.35)}
.x2-hlc{position:relative}
.x2-hn{font-variant-numeric:tabular-nums}
.x2-pv.x2-pv-b{width:clamp(220px,24vw,380px);aspect-ratio:3/2}
.x2-pv.x2-pv-b::before{opacity:0}
.x2-pv.x2-pv-b img{object-fit:cover}
.x2-hframe{display:none}
@media (hover:none),(pointer:coarse){
  .x2-hframe{position:absolute;left:0;bottom:calc(100% + 64px);width:min(78vw,340px);aspect-ratio:3/2;background:#000;overflow:hidden;pointer-events:none;z-index:2}
  .x2-hframe.on{display:block}
  .x2-hframe img{width:100%;height:100%;object-fit:cover}
}
.cr-hitl{max-width:720px;margin:0 auto;text-align:left}

/* the easter egg at the bottom: the Golden hour fold of the old site, closed until someone opens it */
.x2-egg{position:relative;width:min(1240px,calc(100vw - 2 * var(--m)));margin:22vh auto 0}
.x2-egg #golden{margin:0}
.x2-ix .x2-egg{width:auto;margin:10vh 0 0}
.x2-egg .ft-gh{font-size:clamp(10px,.72vw,12px)}
.x2-egg .ft-gh-t{display:inline!important}
.x2-egg #golden{margin-top:clamp(14px,1.4vw,22px)}

/* ======================= 2026-10-31 ======================= */
/* B1: the three roles in the label column's Data Error type; the cities at the statement's size */
.cr2-core .cr2-r.x2-code{font-size:clamp(11px,.85vw,14px);font-weight:400;letter-spacing:.2em}
.x2-b1 .cr2-say.cr2-pl{margin-top:.12em;color:var(--red,#e2231a);font-size:clamp(30px,3.4vw,62px);letter-spacing:-.045em;line-height:1.04}
.x2-b1 .cr2-say{max-width:24ch}
.cr2-say .pf-globe,.cr-say .pf-globe,.pn-say .pf-globe{vertical-align:-.08em}
/* Human in the loop: Field notes as on the site */
.x2-fn{margin:0 0 .4em}
.x2-fn-t{margin:0 0 .5em;font-size:clamp(28px,3vw,54px);font-weight:300;letter-spacing:-.045em;line-height:1}
.cr-hitl .x2-fn-t{font-size:clamp(24px,2.4vw,40px)}
.x2-pv.x2-pv-b{background:transparent}
.x2-pv.x2-pv-b img{object-fit:contain}
.x2-hframe img{object-fit:contain}
@media (hover:none),(pointer:coarse){.x2-hframe{background:transparent}}
/* the footer at the bottom: ©, Dark / Light, Index, Back to top */
.x2-foot{width:min(1240px,calc(100vw - 2 * var(--m)));margin:16vh auto 0;color:rgb(var(--x-rgb) / .55)}
.x2-foot footer{margin:0;padding:clamp(18px,2vw,28px) 0 0;border-top:1px solid rgb(var(--x-rgb) / .12)}
.x2-foot footer a,.x2-foot footer button{color:inherit}
.x2-foot footer a:hover,.x2-foot footer button:hover{color:rgb(var(--x-rgb))}
.x2-ix .x2-foot{width:auto;margin-top:8vh}

/* the light look: header and nav in dark type on paper, the globe drawn dark */
:root[data-pf="light"] .hdr .menu a{color:rgba(18,18,17,.62)}
:root[data-pf="light"] .hdr .menu a:hover,:root[data-pf="light"] .hdr .menu a.on{color:#121211}
:root[data-pf="light"] .hdr .logo panorama-globe-follow{filter:invert(1)}
:root[data-pf="light"] .hdr .burger i,:root[data-pf="light"] .hdr .burger i::before,:root[data-pf="light"] .hdr .burger i::after{background:#121211}
:root[data-pf="light"] .lb{background:var(--x-bg)}
/* the header's nav keeps one place, where it sits beside the wordmark: the large globe hangs from the bar instead of making it taller */
.hdr .logo-slot{aspect-ratio:auto!important;height:44px!important}
.hdr:not(.compact) .logo-slot .logo{position:absolute;left:0;top:0}
@media (max-width:760px){.hdr .logo-slot{height:44px!important}}
/* client logos: the site's own horizontal strip (Andrija, 2026-10-31); the grid only if the strip is missing */
.has-strip .x2-logos-fb{display:none}
.x2-collab .collab{margin:0}
.x2-collab .collab > .tag,.x2-collab .featured{display:none}
.x2-b1 .cr2-wide{row-gap:clamp(18px,2vw,30px)}
.x2-b1 .cr2-wide .cr2-b{grid-column:1/-1}
.x2-collab .clients.logos{margin-inline:calc((100vw - min(1240px,calc(100vw - 2 * var(--m)))) / -2)}
.cr-strip .x2-collab .clients.logos{margin-inline:calc(var(--m) * -1)}
.pn-strip{margin-top:6vh}
.pn-strip .clients.logos{margin-inline:calc(var(--m) * -1)}
.hdr .logo-slot .logo{position:absolute!important;left:0;top:0}
/* the Collective's profile: further right, into the page margin, on a solid ground so the graph never shows through it;
   the names a size smaller, each on one line (Andrija, 2026-10-31) */
@media (min-width:761px){
  .cr2-peers{--drw:340px;--drx:calc((100vw - min(1240px,calc(100vw - 2 * var(--m)))) / 2 - var(--m))}
  .cr2-peers .net-dr{right:calc(var(--drx) * -1)!important;width:var(--drw)!important;background:var(--x-bg)!important;padding:0 0 24px 28px!important;box-shadow:-48px 0 48px var(--x-bg)!important;z-index:5}
  .cr2-peers .net-names{padding-right:calc(var(--drw) - var(--drx) + 28px);font-size:clamp(24px,2.6vw,44px)}
  .cr2-peers .net-names button{white-space:nowrap}
}
/* narrower windows: no room beside the list, so the profile opens below the names (or the graph), on solid ground */
@media (min-width:761px) and (max-width:1199px){
  .cr2-peers .net-dr{position:relative!important;right:auto!important;left:auto!important;top:auto!important;width:auto!important;max-width:520px;margin-top:28px;padding:0!important;box-shadow:none!important}
  .cr2-peers .net-names{padding-right:0}
}

/* ======================= 2026-10-31, the phone version (Andrija) ======================= */
/* Field notes in the code line, where "(filming in progress)" was; the big title is gone */
.x2-fnw{display:inline-flex;align-items:center;gap:.45em;color:rgb(var(--x-rgb))}
.x2-fnw .x2-rd{width:.5em;height:.5em}
.x2-fn,.x2-fn-t{display:none}
/* a collaborator's profile: photo, name and Instagram, nothing else */
.net-dr.x2-crew .dr-bio,.net-dr.x2-crew .dr-code,.net-dr.x2-crew .dr-role,.net-dr.x2-crew [data-all]{display:none!important}
.net-dr.x2-crew .dr-ln{padding-top:16px;margin-top:0}

@media (max-width:760px){
  /* header: globe, wordmark and menu on one line, on the page's margins */
  .hdr .bar{padding-block:12px!important;align-items:center!important;padding-inline:var(--m)}
  .hdr .logo-slot{display:flex!important;align-items:center;height:56px!important;width:auto!important;min-width:56px}
  .hdr .logo-slot .logo{width:56px!important;height:56px!important;top:0!important;left:0!important}
  .hdr .logo-slot .logo panorama-globe-follow{width:100%!important;height:100%!important}
  .hdr .wm{position:relative;top:0;font-size:17px}   /* the size of the wordmark on a project page (Andrija, 2026-10-31) */
  .hdr .burger{align-self:center;margin-right:-11px}

  /* titles: the tile crossing the middle of the screen shows its client and title, centred on the part that is on screen */
  .fx-lab{display:flex;flex-direction:column;align-items:center;gap:0;left:var(--lx,50%);width:var(--lw,80vw);white-space:normal;text-align:center;line-height:1.1;padding:0;background:none}
  .fx-lab span{display:inline;background:var(--x-bg);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.02em .3em}
  .fx-c,.fx-ti{font-size:16px}
  .fx-c{margin-right:0}

  /* the studio, centred like end credits */
  .x2-b1 .cr2-g{text-align:center}
  .x2-b1 .cr2-l{display:flex;justify-content:center}
  .cr2-say,.x2-b1 .cr2-say{margin-inline:auto;font-size:32px}
  .x2-b1 .cr2-say.cr2-pl{font-size:32px}
  .x2-b1 .cr2-meta{justify-content:center}
  .cr2-cols.c3.cr2-core{grid-template-columns:1fr;row-gap:22px}
  .cr2-cols li{align-items:center}
  .cr2-peers .net-view,.cr2-peers .net-hint{justify-content:center;text-align:center}
  /* the Collective: one list, on the left (Andrija, 2026-10-31) */
  .x2-b1 .cr2-g:has(.cr2-peers){text-align:left}
  .x2-b1 .cr2-g:has(.cr2-peers) .cr2-l{justify-content:flex-start}
  .cr2-peers .net-view,.cr2-peers .net-hint{justify-content:flex-start;text-align:left}
  .cr2-peers .net-names{text-align:left;padding-inline:0}
  .cr2-peers .net-dr.inl .x{right:0}
  .cr2-make li{justify-content:center;font-size:32px}
  .cr2-no{display:none}
  .x2-fnl{display:flex;justify-content:center;flex-wrap:wrap;gap:0 .35em}
  .x2-hlc{text-align:center}
  .x2-hframe{left:50%;transform:translateX(-50%)}
  /* clients: a fifth smaller, and faster (index.html) */
  .x2-collab .clients.logos{--u:38px;--gap:47px}   /* 40 % smaller (15:43), then 30 % bigger (16:14) */
  .x2-collab .marq{padding-block:8px}
  /* contact: Email and Instagram in the big type of the ask */
  .x2-b1 .cr2-cmd{justify-content:center}
  .cr2-ask{font-size:46px}
  .x2-b1 .cr2-links{flex-direction:column;align-items:center;gap:.08em;margin-top:.5em;font-size:46px;letter-spacing:-.055em;line-height:1.05}
  .x2-b1 .cr2-links a{text-decoration:none;color:rgb(var(--x-rgb) / .55)}
  .x2-b1 .cr2-links a:active,.x2-b1 .cr2-links a:hover{color:var(--red,#e2231a)}
  /* the bottom: centred; Back to top stays, the year in Roman numerals goes */
  .x2-egg{text-align:center}
  .x2-foot footer{justify-content:center}
  .x2-foot .ft-y{display:none!important}
}
/* touch screens: a tap leaves :hover stuck on a tile, so only the tile in the middle shows its title */
@media (hover:none){
  html:not([data-ttl="under"]) .fx-t:not(.near) .fx-lab{opacity:0!important;visibility:hidden!important}
  .fx-t:not(.near):hover .fx-m{opacity:.75}
}

/* ======================= 2026-10-31, the phone version, round 2 (Andrija) ======================= */
.x2-cur{display:none!important}   /* no blinking block cursor */
@media (max-width:760px){
  /* the wordmark only, no globe */
  .hdr .logo-slot{min-width:0}
  .hdr .logo-slot .logo{display:none!important}
  /* the studio's statement and the cities at the size of "Let's make a film together." */
  .cr2-say,.x2-b1 .cr2-say,.x2-b1 .cr2-say.cr2-pl{font-size:46px;letter-spacing:-.055em;line-height:1}
  .x2-b1 .cr2-say{max-width:none}
  /* contact and Field notes on the left */
  .x2-b1 [data-x2sec="contact"],.x2-b1 .cr2-g:has(.x2-fnl){text-align:left}
  .x2-b1 [data-x2sec="contact"] .cr2-l,.x2-b1 .cr2-g:has(.x2-fnl) .cr2-l{justify-content:flex-start}
  .x2-b1 .cr2-links{align-items:flex-start}
  .x2-fnl{justify-content:flex-start}
  .x2-hlc{text-align:left}
  /* Field notes: a slideshow in one fixed frame (every photo whole, a new one every 0.3 s), the ticks below follow it */
  .x2-slide{position:relative;margin:1.1em 0 0;width:100%;height:min(calc((100vw - 2 * var(--m)) * var(--hr,1.25)),70svh);-webkit-touch-callout:none;user-select:none}
  .x2-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:0 50%;opacity:0;transition:opacity .1s linear}
  .x2-slide img.on{opacity:1}
  .x2-strip{height:18px;margin:.8em 0 .5em;cursor:pointer;touch-action:manipulation}
  .x2-hframe{display:none!important}

}

/* ======================= 2026-10-31, phone round 4 (Andrija) ======================= */
@media (max-width:760px){
  /* B Caption: under every clip, from the page margin, a little smaller */
  /* over the clip, about a tenth of its height up from the bottom, on black strips (Andrija, 2026-10-31) */
  html[data-ttl="under"] .fx-lab{opacity:1!important;visibility:visible!important;display:block;top:auto;bottom:10%;left:var(--cl,0);transform:none;width:auto;max-width:calc(100vw - 32px);text-align:left;white-space:normal;line-height:1.5}
  html[data-ttl="under"] .fx-lab span{background:var(--x-bg);padding:.12em .35em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  html[data-ttl="under"] .fx-lab .fx-c{margin-right:0}
  html[data-ttl="under"] .fx-lab .fx-c::after{content:"";margin-right:.25em}
  html[data-ttl="under"] .fx-c,html[data-ttl="under"] .fx-ti{font-size:12.5px}
  html[data-ttl="under"] .fx-m{opacity:1}
}

/* ======================= 2026-10-31, round 5 (Andrija) ======================= */
/* phones: a project page does not repeat the project's title in its top bar (computers keep it) */
@media (max-width:760px){.lb .lab.ttl{display:none!important}}
/* the project's player: quieter controls, smaller and dimmer, a hairline track and a small knob */
.lb-ctl{opacity:.62;transition:opacity .25s}
.lb-ctl:hover,.lb-ctl:focus-within{opacity:1}
.lb-ctl button svg{width:18px!important;height:18px!important;stroke-width:1.4!important}
.lb-ctl #c-play svg{width:20px!important;height:20px!important}
.lb-ctl #c-tc{font-size:12px;color:rgb(var(--x-rgb) / .6)}
.lb .seek::-webkit-slider-runnable-track{height:1px}
.lb .seek::-moz-range-track{height:1px}
.lb .seek::-webkit-slider-thumb{width:8px;height:8px;margin-top:-3.5px}
.lb .seek::-moz-range-thumb{width:8px;height:8px}
/* Share: the arrow and the word swap places every 4 s: one slides out up and to the right as the other comes in from below;
   the arrow gives a small nudge while it is showing (Andrija, 2026-10-31) */
.lb-bar #lb-share{display:inline-grid!important;align-items:center;justify-items:end;overflow:visible}
.lb-bar #lb-share > .sh-t,.lb-bar #lb-share > .ic{grid-area:1/1;display:inline-block!important}
.lb-bar #lb-share > .sh-t{font-size:.66em;letter-spacing:.02em;animation:x2shT 8s cubic-bezier(.65,0,.35,1) infinite}
.lb-bar #lb-share > .ic{animation:x2shA 8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes x2shA{0%{opacity:0;transform:translate(-5px,5px)}5%{opacity:1;transform:none}22%{transform:none}25%{transform:translate(2px,-2px)}28%{transform:none}45%{opacity:1;transform:none}50%,100%{opacity:0;transform:translate(5px,-5px)}}
@keyframes x2shT{0%,45%{opacity:0;transform:translateY(7px)}50%{opacity:1;transform:none}95%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.lb-bar #lb-share > .sh-t{animation:none;opacity:0}.lb-bar #lb-share > .ic{animation:none}}
/* a project's text dims while its film plays, and comes back when touched or paused */
.lb #pj{transition:filter .6s ease}   /* a filter, not opacity: the page's fade-in animation holds opacity */
.lb.is-playing #pj{filter:brightness(.42)}
.lb.is-playing #pj:hover,.lb.is-playing #pj:focus-within{filter:none}
/* Golden hour: the site's own type back, a size smaller; the code around it (keys, the formula, the hint) in Data Error
   (Andrija, 2026-10-31: all Data Error was too much) */
.x2-egg .ft-gh,#golden .gh-tease{font-size:12px!important}
#golden .gh-code{font-size:13px!important;line-height:1.45!important;gap:1.1em!important}
/* less Data Error (16:14): only the short labels (Input Type, Time, Output Type) and the clock; the formula, now() and the hint in Untitled */
#golden .gh-code p:not(#ghPin) > span.k{font-family:"Data Error Horiz",ui-monospace,monospace!important;letter-spacing:.08em!important;font-size:11px!important}
#golden .gh-code p:not(#ghPin) > span.k .gh-gold{font-family:var(--sans)!important;letter-spacing:0!important;font-size:13px!important}
#golden .gh-hint{font-size:12px!important}
@media (max-width:760px){
  .x2-egg,.x2-egg #golden{text-align:left}
  .x2-egg .ft-gh{justify-content:flex-start}
}

/* Field notes counter in Data Error: frame 08 / 102 · loop = true (Andrija, 2026-10-31, 15:34) */
.x2-hlc,.x2-hlc .k,.x2-hlc .v{font-family:"Data Error Horiz",ui-monospace,monospace!important;letter-spacing:.2em;font-size:clamp(11px,.85vw,14px)}
@media (prefers-reduced-motion:reduce){.x2-slide img{transition:none}}

/* 2026-10-31, 15:43 (Andrija) */
/* no Index */
.x2-ixl,.nav-ix,.ft-ix,[data-index]{display:none!important}
/* Field notes slideshow: each photo at its own size and place in the frame */
.x2-slide img{inset:auto;object-position:50% 50%}   /* centred both ways, sizes vary (16:14) */
/* the Collective list: a small photo before each name, the Instagram handle after it; collaborators' names open nothing */
.cr2-peers .net-names > li.x2-pp{display:block}
.cr2-peers .net-names > li > button.x2-nodr{cursor:default}
/* the handle in the names' own type, in red, smaller (Andrija, 2026-10-31, 15:53: no photo in front) */
.cr2-peers .net-names .x2-ig{font:inherit;font-size:.42em;letter-spacing:-.02em;color:var(--red,#e2231a);display:inline-block;vertical-align:top;margin:.3em 0 0 .45em;text-decoration:none;line-height:1.2;white-space:nowrap}
.cr2-peers .net-names .x2-ig:hover{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:760px){
  /* phones: the list only, no graph */
  .cr2-peers .net-view,.cr2-peers .net-wrap,.cr2-peers #netHint{display:none!important}
  /* the clips touch; the picture moves inside its frame */
  .fx-tiles .fx-m{opacity:1;inset:-1px 0}   /* a hair of overlap, so no seam shows between clips */
  .fx-tiles .fx-m > img,.fx-tiles .fx-m > video,.fx-tiles .fx-m > .stream{top:-12%!important;height:124%!important;bottom:auto!important;transform:translate3d(0,var(--py,0px),0)}
}
@media (max-width:760px){.x2-strip{display:none!important}.x2-hlc{margin-top:.9em}}   /* phones: no tick strip under the Field notes slideshow (16:14) */
/* computers: the title sits on the clip's bottom edge, centred on that line (Andrija, 2026-10-31, 16:15) */
@media (min-width:761px){.fx-lab{top:100%}.fx-i:has(.fx-t:hover),.fx-i:has(.fx-t:focus-visible){z-index:6}}

/* 2026-11-06 (Andrija), computers */
@media (min-width:761px){
  /* the studio statement and the cities in Medium, the weight of the Collective's names */
  .x2-b1 .cr2-say{font-weight:500}
  /* We make: the words on the same left edge as the statement above; the numbers hang in the margin */
  .x2-b1 .cr2-no{width:3em;margin-left:calc(-3em - clamp(14px,1.6vw,28px))}
}
/* the project titles on their black strip always show, not only under the pointer (computers with a mouse) */
@media (min-width:761px) and (hover:hover){
  .fx-lab{opacity:1;visibility:visible;transition:none}
}
/* collaborators' names light up red under the pointer like the core three (they lead to their Instagram) */
.cr2-peers .net-names > li.x2-pp > button.x2-nodr{transition:opacity .9s cubic-bezier(.2,.6,.3,1),color .9s cubic-bezier(.2,.6,.3,1)}
.cr2-peers .net-names > li.x2-pp:hover > button.x2-nodr{color:var(--red,#e2231a);opacity:1;transition-duration:0s}
.cr2-peers .net-names > li.x2-hasig > button.x2-nodr{cursor:pointer}
@media (min-width:761px){.fx-i:has(.fx-t:hover),.fx-i:has(.fx-t:focus-visible){z-index:1000!important}}
/* 2026-11-06, second round (Andrija) */
/* only the moving tile takes the pointer: the tile's own box stays where it was laid out and, stacked above the studio, it blocked
   dragging the client logos (and the Field notes) */
.fx-i{pointer-events:none}.fx-t{pointer-events:auto}
@media (min-width:761px){
  /* each label sits on the baseline of the first line beside it */
  .x2-b1 .cr2-g{align-items:baseline}
  .x2-b1 .cr2-l{padding-top:0}
  /* We make in the studio statement's type: size, weight, spacing */
  .x2-b1 .cr2-make li{font-size:clamp(30px,3.4vw,62px);font-weight:500;letter-spacing:-.045em;line-height:1.04;padding:.12em 0}
}
/* Field notes ticks (2026-11-06, Andrija): squares filling the strip's width exactly; the red one the same size as the grey */
.x2-strip{display:grid;grid-template-columns:repeat(var(--n,100),minmax(0,1fr));gap:2px;height:auto;align-items:start}
.x2-strip i{max-width:none;min-width:0;aspect-ratio:1}
.x2-strip i.on{transform:none}
/* Field notes squares a bit bigger: two rows (2026-11-06) */
.x2-strip{grid-template-columns:repeat(var(--c,51),minmax(0,1fr));row-gap:2px}
/* Field notes squares in one line again, from margin to margin of the window (width and offset set by script); the photo sits above its square (2026-11-06) */
.x2-strip{grid-template-columns:repeat(var(--n,100),minmax(0,1fr))}
.x2-pv.x2-pv-b{transition:opacity .12s,visibility 0s linear .12s}
.x2-pv.x2-pv-b.on{transition:opacity .12s,visibility 0s}
/* Field notes squares back to 7 px, spread evenly from margin to margin (2026-11-06, later) */
@media (min-width:761px){.x2-strip{grid-template-columns:repeat(var(--n,100),7px);justify-content:space-between}.x2-strip i{width:7px}}
/* Field notes line at most half the window wide, squares 2 px apart (7 px squares when there is room) (2026-11-06, later) */
@media (min-width:761px){.x2-strip{width:min(calc(var(--n,102) * 9px - 2px),50vw);grid-template-columns:repeat(var(--n,100),minmax(0,1fr));justify-content:start;gap:2px}.x2-strip i{width:auto}}
/* "Email copied" (2026-11-06) */
.x2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a[data-mail].is-copied{color:var(--red,#e2231a)!important;display:inline-block}
/* "Let's make a film together." a tad bolder (Light → Regular) and a tad smaller (about 87 px instead of 100 at 1560 px) (2026-11-06) */
@media (min-width:761px){.cr2-ask{font-size:clamp(40px,5.6vw,108px);font-weight:400;letter-spacing:-.05em}}
/* We make in red (2026-11-06); the 01–05 numbers stay grey */
.x2-b1 .cr2-make li{color:var(--red,#e2231a)}
/* 2026-11-08 (Andrija) */
@media (min-width:761px){
  /* more room above and below Field notes (padding: margins between the groups would just merge) */
  .x2-b1 .cr2-g:has(.x2-strip){padding:14vh 0}
}
/* We make under the pointer (Andrija, 2026-11-08, chose b of four): the word turns white, the page's own type colour; nothing moves,
   the other rows stay red, the number turns red */
@media (min-width:761px) and (hover:hover){
  .x2-b1 .cr2-make li{cursor:default;transition:color .35s cubic-bezier(.2,.7,.2,1)}
  .x2-b1 .cr2-make li:hover{color:rgb(var(--x-rgb))}
  .x2-b1 .cr2-make li:hover .cr2-no{color:var(--red,#e2231a)}
}
/* hello@panoramafilms.tv and @panoramafilms.tv in place of Email / Instagram, drawn by CSS from their parts (kept from robots) (2026-11-08) */
.x2-gen[data-u]::before{content:attr(data-u) "\40" attr(data-d)}
.x2-gen[data-h]::before{content:"\40" attr(data-h)}
@media (min-width:761px){
  /* the same type as "Let's make a film together.", one under the other, grey; red under the pointer */
  .x2-b1 .cr2-links{flex-direction:column;align-items:flex-start;gap:0;margin-top:.15em;font-size:clamp(40px,5.6vw,108px);font-weight:400;letter-spacing:-.05em;line-height:.98}
  .x2-b1 .cr2-links a{text-decoration:none;color:rgb(var(--x-rgb) / .55)}
  .x2-b1 .cr2-links a:hover{color:var(--red,#e2231a)}
}
/* the profile of Andrija, Mina and Marija under the pointer, smaller (Andrija, 2026-11-08): a wider box (440 px) further in from the
   right (twice the page margin), a smaller photo, name and text, the bio across the box's full width so it runs to fewer lines */
@media (min-width:1200px){
  .cr2-peers{--drw:clamp(300px,22vw,340px);--drx:calc((100vw - min(1240px,calc(100vw - 2 * var(--m)))) / 2 - 2 * var(--m))}
  /* the names keep the room they had (box 340 px into the margin), so no handle wraps; the box may cover the end of a long name */
  .cr2-peers .net-names{padding-right:calc(340px - ((100vw - min(1240px,calc(100vw - 2 * var(--m)))) / 2 - var(--m)) + 28px)}
  .cr2-peers .net-dr{box-shadow:-24px 0 24px var(--x-bg)!important}
  .cr2-peers .net-dr .dr-ph{width:120px;margin:0 0 18px}
  .cr2-peers .net-dr .dr-nm{font-size:clamp(20px,1.5vw,24px)}
  .cr2-peers .net-dr .dr-code{margin-top:10px}
  .cr2-peers .net-dr .dr-bio{margin-top:14px;font-size:14px;line-height:1.5;max-width:none}
  .cr2-peers .net-dr .dr-ln{margin-top:16px}
  .cr2-peers .net-dr .dr-ln a,.cr2-peers .net-dr .dr-ln button{font-size:14px}
}
/* the profile (everyone's again, with the bio) in the empty column left of the list, from the page margin to 40 px short of the
   names, on solid ground; a bigger photo and text than the narrow box on the right had; the names get their full width back
   (Andrija, 2026-11-08). 761–1199 px: below the list, as before */
@media (min-width:1200px){
  .cr2-peers .net-dr{left:calc(var(--m) - var(--pl,0px))!important;right:auto!important;width:calc(var(--pl,400px) - var(--m) - 40px)!important;max-width:420px;padding:0 28px 24px 0!important;box-shadow:24px 0 24px var(--x-bg)!important}
  .cr2-peers .net-names{padding-right:0!important}
  .cr2-peers .net-dr .dr-ph{width:160px;margin:0 0 20px}
  .cr2-peers .net-dr .dr-nm{font-size:clamp(22px,1.7vw,28px)}
  .cr2-peers .net-dr .dr-bio{font-size:15px;line-height:1.5}
  .cr2-peers .net-dr .dr-ln a,.cr2-peers .net-dr .dr-ln button{font-size:15px}
}