/* ── Rushes ────────────────────────────────────────────────────────────────
   One stylesheet for every page. From Amr's two references: the video's
   wall of huge condensed type with frames streaming over it, and the
   still's 35mm frames, camcorder viewfinder, red technical readout and
   yellow line wheels. Every readout on the site is measured or counted from
   the work itself. Dark is the default; light is the video's palette.
   ────────────────────────────────────────────────────────────────────── */
:root{
  --rec:#E8262B; --edl:#E5332D; --grey:#8A8A8A; --yellow:#E4DA1C; --rec-ink:#fff; --yellow-ink:#000;
  --wall:'Archivo','Arial Narrow',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --gut:28px;
}
[data-theme="dark"]{--hA:#2A2A2A;--hB:#171717;--bg:#060606;--sel:#060606;--fg:#EDEDED;--rowA:#EDEDED;--rowB:#202020;--film:#0B0B0B;--wheel:var(--yellow);
  --shadow:rgba(0,0,0,.7);--line:rgba(237,237,237,.16);--panel:#0E0E0E}
/* light is a lightbox: a calibrated light grey, never paper white (the same
   neutral-surround argument as the dark grading room), near-black ink, panels a
   touch brighter than the table, and the film itself left as film */
[data-theme="light"]{--grey:#646464;--hA:#D6D6D6;--hB:#E3E3E3;--bg:#F1F1F1;--sel:#E4E4E4;--fg:#0A0A0A;--rowA:#0A0A0A;--rowB:#D7D7D7;--film:#0B0B0B;--wheel:var(--fg);
  --shadow:rgba(0,0,0,.16);--line:rgba(0,0,0,.14);--panel:#F9F9F9}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} }
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 calc(15px * var(--text-k,1))/1.5 var(--wall);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rec);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* film grain over the whole page. rushes.js shifts it a little eight times a second; the
   layer runs one tile (220px) past the right and bottom edges so a shift never shows an edge */
.grain{position:fixed;top:0;left:0;right:-220px;bottom:-220px;z-index:60;pointer-events:none;background:url(grain.png);opacity:var(--grain,.08);will-change:transform}
[data-theme="light"] .grain{opacity:calc(var(--grain,.08) * .625)}
.mono{font:500 calc(11px * var(--label-k,1))/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.bigtitle{margin:0;font-weight:900;font-variation-settings:'wdth' 62;font-size:calc(clamp(96px,14vw,220px) * var(--title-k,1));line-height:.8;text-transform:uppercase}

/* ── buttons: the tape label and the REC button ───────────────────────── */
.tag{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#000;border:0;padding:9px 13px;cursor:pointer;
  text-decoration:none;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
/* on the light page the tag inverts */
[data-theme="light"] .tag{background:var(--fg);color:var(--bg)}
.recbtn{display:inline-flex;align-items:center;gap:14px;background:var(--rec);color:var(--rec-ink);text-decoration:none;border:0;cursor:pointer;
  padding:18px 26px;font:800 18px/1 var(--wall);letter-spacing:.08em;text-transform:uppercase}
.recbtn i{width:14px;height:14px;border-radius:50%;background:var(--rec-ink);flex:none}
.recbtn:hover{background:var(--fg);color:var(--bg)}
.recbtn:hover i{background:var(--rec)}
@media (prefers-reduced-motion:no-preference){ .recbtn i,.vf .rec::before,.recpill i{animation:blink 1s steps(2,jump-none) infinite} @keyframes blink{50%{opacity:.15}} }

/* ── nav: fixed on every page, inverting against whatever is under it ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--gut);mix-blend-mode:difference;color:#fff;font:600 12px/1 var(--wall);letter-spacing:.12em;text-transform:uppercase}
.nav nav{display:flex;gap:22px}
.nav a{text-decoration:none}
body.scrolled .nav{mix-blend-mode:normal;color:var(--fg);background:var(--bg);border-bottom:1px solid var(--line);padding-top:14px;padding-bottom:14px}
.nav{transition:padding .2s ease}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* ── the leader (home only) ───────────────────────────────────────────── */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.leader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#0B0B0B;color:#E9E9E9;cursor:pointer}
.leader[hidden]{display:none}
/* the name above the ring and the role below it, for the whole count */
.leader .lhead{display:grid;justify-items:center;gap:clamp(16px,3vmin,28px);text-align:center}
.leader .lname{margin:0;font:900 min(9vmin,78px)/.82 var(--wall);font-variation-settings:'wdth' 62;text-transform:uppercase;white-space:nowrap}
.leader .lrole{font:500 calc(12px * var(--label-k,1))/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7A7A7A}
.leader .ring{position:relative;width:min(46vmin,350px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 0 0 3px #E9E9E9,inset 0 0 0 16px #0B0B0B,inset 0 0 0 18px #E9E9E9}
.leader .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(233,233,233,.2) var(--a),transparent 0);animation:sweep .6s linear infinite}
@keyframes sweep{from{--a:0deg}to{--a:360deg}}
.leader .cross{position:absolute;inset:0;opacity:.75;background:linear-gradient(#E9E9E9,#E9E9E9) 50% 0/2px 100% no-repeat,linear-gradient(#E9E9E9,#E9E9E9) 0 50%/100% 2px no-repeat}
.leader b{position:relative;font:900 min(28vmin,222px)/1 var(--wall);font-variation-settings:'wdth' 62}
.leader .lskip{position:absolute;bottom:24px;font:500 calc(11px * var(--label-k,1))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7A7A7A}
.leader.flash{background:#fff}
.leader.flash > *{visibility:hidden}

/* ── the type wall ────────────────────────────────────────────────────── */
.wall{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;pointer-events:none;user-select:none}
.wall p{margin:0;white-space:nowrap;font-family:var(--wall);font-weight:900;font-variation-settings:'wdth' 62;
  font-size:calc(min(26svh,23vw) * var(--wall-size,1));line-height:.8;letter-spacing:-.005em;text-transform:uppercase}
/* --wall-a/--wall-b: a colour chosen at /admin for every wall; unset, the designed greys */
.wall .a{color:var(--wall-a,var(--rowA))}
.wall .b{color:var(--wall-b,var(--rowB))}
/* on the banner the wall is texture behind the name, never competing with it */
.hero .wall .a{color:var(--wall-a,var(--hA))}
.hero .wall .b{color:var(--wall-b,var(--hB))}
.wall p:nth-child(odd){transform:translateX(calc(-4% + var(--sx,0px)))}
.wall p:nth-child(even){transform:translateX(calc(-27% - var(--sx,0px)))}

/* ── the home banner: a viewfinder over the wall and the stream ───────── */
.hero{position:relative;height:100svh;min-height:660px;overflow:hidden;background:var(--bg)}
.hero.arrive .stream{animation:settle 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes settle{from{opacity:0;transform:translateY(80px) rotate(-3deg) scale(.94)}to{opacity:1;transform:none}}
.stream{position:absolute;top:0;bottom:0;left:50%;width:min(520px,36vw);margin-left:calc(min(520px,36vw) / -2);z-index:10}
.track{display:flex;flex-direction:column;align-items:center;will-change:transform}
.set{display:flex;flex-direction:column;align-items:center;width:100%;padding-bottom:6px}
.set .ff + .ff{margin-top:-24px}
@media (prefers-reduced-motion:no-preference){
  .track{animation:rise var(--film-speed,70s) linear infinite}
  @keyframes rise{to{transform:translateY(-50%)}}
}
body.paused .track,body.paused .tape-run,.stream:focus-within .track{animation-play-state:paused}

.sticker{position:absolute;left:50%;top:calc(50% + var(--fit-fs,200px) * .4 + 18px);z-index:16;margin:0;pointer-events:none;
  transform:translateX(-50%) rotate(-3deg);max-width:calc(100% - 2 * var(--gut));
  background:#000;color:#fff;border:3px solid #fff;border-radius:12px;padding:12px 20px 13px;box-shadow:0 18px 40px rgba(0,0,0,.6);
  font-weight:800;font-variation-settings:'wdth' 75;font-size:calc(clamp(20px,2.5vw,38px) * var(--text-k,1));line-height:1.05;letter-spacing:.01em;
  text-transform:uppercase;text-align:center;text-wrap:balance}
@media (prefers-reduced-motion:no-preference){
  .hero.arrive .sticker{animation:stick .5s .55s cubic-bezier(.2,1.4,.4,1) both}
  @keyframes stick{from{opacity:0;transform:translateX(-50%) rotate(-11deg) scale(1.25)}to{opacity:1;transform:translateX(-50%) rotate(-3deg) scale(1)}}
}
@keyframes stick-l{from{opacity:0;transform:rotate(-11deg) scale(1.25)}to{opacity:1;transform:rotate(-3deg) scale(1)}}
.name2 i{font-style:normal;white-space:nowrap}

/* the viewfinder frame around the whole banner */
.vfh{position:absolute;inset:64px 22px 62px;z-index:25;pointer-events:none}
.vfh .c{position:absolute;width:44px;height:44px;border:3px solid #fff;mix-blend-mode:difference}
.vfh .tl{top:0;left:0;border-right:0;border-bottom:0}
.vfh .tr{top:0;right:0;border-left:0;border-bottom:0}
.vfh .bl{bottom:0;left:0;border-right:0;border-top:0}
.vfh .br{bottom:0;right:0;border-left:0;border-top:0}
.recpill{position:absolute;top:0;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;
  background:#000;color:#fff;padding:7px 12px;font:600 12px/1 var(--mono);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.recpill i{width:10px;height:10px;border-radius:50%;background:var(--rec)}
.recpill span{color:#9A9A9A}

/* a 35mm frame */
.ff{position:relative;display:block;width:var(--w,100%);padding:0;border:0;background:var(--film);cursor:pointer;text-align:left;
  transform:translateX(var(--x,0%)) rotate(var(--r,0deg));box-shadow:0 30px 70px var(--shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ff::before,.ff::after{content:'';position:absolute;left:10px;right:10px;height:7px;border-radius:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 9px,transparent 9px 21px)}
.ff::before{top:5px}
.ff::after{bottom:5px}
.edge{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 14px 5px;font:500 calc(9px * var(--label-k,1))/1 var(--mono);
  letter-spacing:.14em;color:#cfcfcf;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.edge.low{padding:5px 14px 15px;color:var(--grey)}
.kk{flex:0 0 58px;height:7px;opacity:.75;
  background:repeating-linear-gradient(90deg,#cfcfcf 0 1px,transparent 1px 3px,#cfcfcf 3px 6px,transparent 6px 7px,#cfcfcf 7px 8px,transparent 8px 11px)}
.pic{position:relative;display:block;margin:0 14px;aspect-ratio:16/9;overflow:hidden;background:#111}
.pic img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .7s ease}

/* the film playing in its own frame: invisible until it reports that it is
   actually running, so a slow or refused embed simply leaves the still */
.pic iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .35s ease}
.pic iframe[data-on]{opacity:1}
.ff.playing .kk + span::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rec);margin-right:6px;vertical-align:0}

/* the calm banner: the wall drops back and the viewfinder marks are finer */
.hero.calm .wall{opacity:.55}
.hero.calm .vfh .c{width:34px;height:34px;border-width:2px}
.hfoot{position:absolute;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;
  padding:16px var(--gut);font:500 calc(11px * var(--label-k,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.hfoot .who{mix-blend-mode:difference;color:#fff}
.hfoot .ctl{justify-self:end;display:flex;gap:8px}
.hfoot .go{justify-self:center}


/* ── what I do ────────────────────────────────────────────────────────── */
.what{background:var(--bg);color:var(--fg);padding:120px 0 90px}
.shead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 28px;padding:0 var(--gut);margin-bottom:56px}
.shead .lede{margin:0 0 6px;max-width:34ch;color:var(--grey)}
.dept{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,400px);align-items:center;gap:28px;
  padding:14px var(--gut) 18px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.dept:last-child{border-bottom:1px solid var(--line)}
.dn{font-weight:900;font-variation-settings:'wdth' 62;font-size:calc(clamp(84px,13vw,210px) * var(--title-k,1));line-height:.84;text-transform:uppercase;transition:color .25s}
.dd{display:grid;gap:8px;font:500 calc(12px * var(--label-k,1))/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--grey)}
.dc{color:var(--fg);font-size:calc(15px * var(--text-k,1));letter-spacing:.08em}
.dv{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.dp{position:absolute;right:460px;top:50%;width:320px;padding:10px;background:var(--film);pointer-events:none;opacity:0;
  transform:translateY(-50%) rotate(-5deg) scale(.88);transition:opacity .25s,transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 70px var(--shadow)}
.dp .pic{margin:0}
.dept:hover .dn,.dept:focus-visible .dn{color:var(--rec)}
.dept:hover .dp,.dept:focus-visible .dp{opacity:1;transform:translateY(-50%) rotate(-5deg) scale(1)}

/* ── two tapes crossing the cut between sections ──────────────────────── */
.cut{position:relative;height:clamp(230px,24vw,330px);background:linear-gradient(var(--bg) 50%,var(--sel) 50%);overflow:hidden}
.cut.flat{background:var(--bg);margin-bottom:60px}
.tape{position:absolute;left:-80px;right:-80px;top:50%;padding:13px 0;overflow:hidden;border-top:3px solid #000;border-bottom:3px solid #000}
.tape.t1{z-index:2;background:var(--yellow);color:var(--yellow-ink);transform:translateY(-50%) rotate(-4deg)}
.tape.t2{z-index:1;background:#000;color:#EDEDED;border-color:var(--yellow);transform:translateY(-50%) rotate(3.2deg)}
.tape-run{display:flex;align-items:center;width:max-content}
@media (prefers-reduced-motion:no-preference){
  .t1 .tape-run{animation:tape calc(46s / var(--tape-k,1)) linear infinite}
  .t2 .tape-run{animation:tape calc(60s / var(--tape-k,1)) linear infinite reverse}
  @keyframes tape{to{transform:translateX(-50%)}}
}
.tape span{padding:0 26px;white-space:nowrap;font-weight:900;font-variation-settings:'wdth' 62;font-size:clamp(40px,5.2vw,80px);line-height:1;text-transform:uppercase}
.tape.t2 span{font-size:clamp(26px,3vw,44px)}
.tape i{flex:none;width:16px;height:16px;background:currentColor;border-radius:2px}

/* ── selects: one strip of film across the page ───────────────────────── */
.selects{background:var(--sel);color:#fff;padding:100px 0 120px;overflow:hidden;position:relative}
.selects .shead{margin-bottom:54px}
.selects .note{margin:0 auto 6px 0;color:var(--grey);max-width:30ch}
.selects .ctl{display:flex;gap:8px;margin-bottom:6px}
.strip-wrap{transform:rotate(-2.2deg);margin:0 -60px}
/* the roll fades in at the left edge of the screen and out at the right, the way
   the banner's film fades top and bottom. 60px is the overhang past each edge. */
.strip-wrap{--fe:clamp(56px,12vw,200px);
  -webkit-mask-image:linear-gradient(90deg,transparent 60px,rgba(0,0,0,.18) calc(60px + var(--fe) * .3),rgba(0,0,0,.5) calc(60px + var(--fe) * .55),rgba(0,0,0,.82) calc(60px + var(--fe) * .8),#000 calc(60px + var(--fe)),#000 calc(100% - 60px - var(--fe)),rgba(0,0,0,.82) calc(100% - 60px - var(--fe) * .8),rgba(0,0,0,.5) calc(100% - 60px - var(--fe) * .55),rgba(0,0,0,.18) calc(100% - 60px - var(--fe) * .3),transparent calc(100% - 60px));
          mask-image:linear-gradient(90deg,transparent 60px,rgba(0,0,0,.18) calc(60px + var(--fe) * .3),rgba(0,0,0,.5) calc(60px + var(--fe) * .55),rgba(0,0,0,.82) calc(60px + var(--fe) * .8),#000 calc(60px + var(--fe)),#000 calc(100% - 60px - var(--fe)),rgba(0,0,0,.82) calc(100% - 60px - var(--fe) * .8),rgba(0,0,0,.5) calc(100% - 60px - var(--fe) * .55),rgba(0,0,0,.18) calc(100% - 60px - var(--fe) * .3),transparent calc(100% - 60px))}
.strip{list-style:none;margin:0;display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;cursor:grab;
  padding:34px 60px;background-color:#101010;background-attachment:local;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 12px,transparent 12px 27px),repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 12px,transparent 12px 27px);
  background-size:100% 8px,100% 8px;background-position:0 10px,0 calc(100% - 10px);background-repeat:repeat-x}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip li{flex:0 0 auto;scroll-snap-align:start;padding-right:18px}
.sf{display:block;width:min(430px,76vw);padding:0;border:0;background:none;color:#fff;text-align:left;cursor:inherit}
.sf .pic{margin:0}
/* Selects runs in black and white on every screen; on a computer the frame under
   the pointer (or focused) shows its colour */
.sf .pic img{filter:grayscale(1) contrast(1.2)}
[data-selects="colour"] .sf .pic img{filter:none}
/* the banner's frames can run black and white too (a look setting); the one under the pointer shows its colour */
[data-banner="bw"] .stream .pic img{filter:grayscale(1) contrast(1.2)}
[data-banner="bw"] .stream .ff:hover .pic img{filter:none}
.sf:focus-visible .pic img{filter:none}
@media (hover:hover){ .sf:hover .pic img{filter:none} }
.cap{display:flex;justify-content:space-between;gap:14px;padding-top:11px;font:500 calc(11px * var(--label-k,1))/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cap b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap span{color:var(--grey);white-space:nowrap}

/* ── the contact wall, closing every page ─────────────────────────────── */
.contact{position:relative;background:var(--bg);padding:80px 0 40px;overflow:hidden}
.contact .wall{position:static;display:block;opacity:var(--wall-contact-k,1)}
.contact .wall p{font-size:calc(clamp(110px,19vw,300px) * var(--wall-size,1))}
.act{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding:36px var(--gut) 0;
  font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.act .left{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.act .mail{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.act .links{display:flex;flex-wrap:wrap;gap:22px}
.act a:hover{color:var(--rec)}
.act .right{display:flex;align-items:center;gap:14px}

/* ── inner pages: the head ────────────────────────────────────────────── */
.phead{position:relative;padding:160px var(--gut) 56px;overflow:hidden}
.phead .pwall{justify-content:center;opacity:var(--wall-pages-k,1)}
.phead .pwall p{font-size:calc(clamp(110px,15vw,240px) * var(--wall-size,1))}
.phead .wall .a{color:var(--wall-a,var(--hA))}
.phead .wall .b{color:var(--wall-b,var(--hB))}
.phead .row{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px 28px}
.phead .pside{display:grid;gap:14px;justify-items:start;max-width:42ch}
.phead .lede{background:var(--bg);padding:10px 12px;margin:0}
.phead .lede{color:var(--grey)}
.phead .recpill{position:static;transform:none;margin-bottom:8px}

/* ── work: tape-label tabs and a contact sheet ────────────────────────── */
.tabs{position:sticky;top:50px;z-index:30;display:flex;flex-wrap:wrap;gap:8px;padding:12px var(--gut);margin-bottom:32px;background:var(--bg)}
.tabs button{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);color:var(--fg);cursor:pointer;
  padding:11px 14px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tabs button b{font-weight:500;color:var(--grey)}
.tabs button[aria-selected="true"]{background:var(--rec);border-color:var(--rec);color:var(--rec-ink)}
.tabs button[aria-selected="true"] b{color:#fff}
.sheet{list-style:none;margin:0;padding:0 var(--gut) 110px;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:44px 28px}
.sheet li{min-width:0}
.sheet li[hidden]{display:none}
.sheet .ff{box-shadow:0 20px 50px var(--shadow)}
.sheet .ff:hover,.sheet .ff:focus-visible{transform:rotate(0deg) translateY(-6px)}
.sheet .cap{padding:12px 4px 0}


/* ── about ────────────────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:60px;padding:10px var(--gut) 90px;align-items:start}
.about .bio p{margin:0 0 22px;font:400 calc(clamp(18px,1.5vw,21px) * var(--text-k,1))/1.6 var(--wall);color:var(--grey);max-width:62ch}
.about .bio strong{color:var(--fg);font-weight:600}
.about .pile{position:relative;height:520px}
.about .pile .ff{position:absolute;width:78%}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 var(--gut) 110px}
.facts div{padding:26px 22px 22px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font-weight:900;font-variation-settings:'wdth' 62;font-size:calc(clamp(70px,8vw,128px) * var(--title-k,1));line-height:.85}
.facts span{display:block;margin-top:10px;color:var(--grey)}
.sub{padding:0 var(--gut);margin:0 0 30px}
.sub h2{margin:0;font-weight:900;font-variation-settings:'wdth' 62;font-size:calc(clamp(64px,8vw,130px) * var(--title-k,1));line-height:.85;text-transform:uppercase}
.nle-wrap{margin:0 var(--gut) 110px;overflow-x:auto}
.nle{position:relative;min-width:980px;background:var(--panel);border:1px solid var(--line);padding:0 0 18px}
.ruler{position:relative;height:34px;margin-left:64px;border-bottom:1px solid var(--line)}
.ruler span{position:absolute;bottom:0;height:10px;border-left:1px solid var(--grey)}
.ruler span b{position:absolute;bottom:13px;left:-14px;font:500 calc(10px * var(--label-k,1))/1 var(--mono);color:var(--grey);letter-spacing:.06em}
.tr{position:relative;display:flex;align-items:stretch;height:64px;margin-top:12px}
.tr .tn{flex:0 0 64px;display:grid;place-items:center;font:500 calc(11px * var(--label-k,1))/1 var(--mono);color:var(--grey);letter-spacing:.1em}
.tr .lane{position:relative;flex:1}
/* company on top, role under it, each one line: a short job keeps what fits and the
   full line sits in the clip's title. The shadow is the cut between clips that touch. */
.clip{position:absolute;top:0;bottom:0;padding:9px 8px;overflow:hidden;border-radius:2px;box-shadow:-1px 0 0 var(--panel);font:500 calc(10px * var(--label-k,1))/1.35 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.clip b{display:block;font:800 13px/1.15 var(--wall);letter-spacing:.02em;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip > span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip.c0{background:var(--rec);color:var(--rec-ink)}
.clip.c1{background:var(--yellow);color:var(--yellow-ink)}
.clip.c2{background:#EDEDED;color:#000}
.clip.c3{background:#3A3A3A;color:#fff}
.tr.place .lane .clip{background:transparent;border:1px solid var(--line);color:var(--fg)}
.clip:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
/* the card for the clip under the pointer (or finger, or focus): the whole job, unclipped */
.tl-tip{position:fixed;left:0;top:0;z-index:60;max-width:280px;padding:10px 13px 11px;background:var(--fg);color:var(--bg);border-radius:2px;
  box-shadow:0 14px 40px var(--shadow);pointer-events:none;opacity:0;transition:opacity .12s;font:500 calc(11px * var(--label-k,1))/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tl-tip.on{opacity:1}
.tl-tip b{display:block;font:800 calc(16px * var(--text-k,1))/1.15 var(--wall);letter-spacing:.01em;text-transform:none;margin-bottom:4px}
.tl-tip span{display:block}
.tl-tip .yr{opacity:.7}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--rec);z-index:2}
.playhead::before{content:'Now';position:absolute;top:6px;right:8px;font:600 calc(10px * var(--label-k,1))/1 var(--mono);letter-spacing:.1em;color:var(--rec);text-transform:uppercase}
.bins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:0 var(--gut) 110px}
.bin{background:var(--panel);border:1px solid var(--line)}
.bin h3{margin:0;padding:12px 14px;border-bottom:1px solid var(--line);font:600 calc(11px * var(--label-k,1))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  display:flex;justify-content:space-between}
.bin ul{list-style:none;margin:0;padding:12px 14px 16px;display:grid;gap:8px;font:400 calc(15px * var(--text-k,1))/1.35 var(--wall)}
.bin li::before{content:'';display:inline-block;width:8px;height:8px;background:var(--fg);margin-right:10px;vertical-align:1px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;padding:0 var(--gut) 110px}

/* ── contact page: the camera menu ────────────────────────────────────── */
.ccard{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;padding:20px var(--gut) 110px;align-items:start}
.menu{background:var(--panel);border:2px solid var(--fg)}
.menu .bar{display:flex;justify-content:space-between;padding:10px 14px;background:var(--fg);color:var(--bg);font:600 calc(11px * var(--label-k,1))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.menu form{display:grid;gap:18px;padding:22px 18px 22px}
.menu label{display:grid;gap:8px;font:500 calc(11px * var(--label-k,1))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.menu input,.menu textarea{width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:13px 14px;font:400 calc(16px * var(--text-k,1))/1.4 var(--wall);border-radius:0}
.menu input:focus,.menu textarea:focus{outline:none;border-color:var(--rec)}
.menu .send{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.menu .status{font:500 calc(11px * var(--label-k,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.menu .status[data-tone="ok"]{color:var(--fg)}
.menu .status[data-tone="bad"]{color:var(--rec)}
.menu .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.menu button[disabled]{opacity:.6;cursor:progress}
.side-note{display:grid;gap:22px}
.side-note p{margin:0;font:400 calc(19px * var(--text-k,1))/1.55 var(--wall);color:var(--grey);max-width:40ch}
.side-note .links{display:flex;flex-wrap:wrap;gap:10px}

/* ── cv: a call sheet ─────────────────────────────────────────────────── */
.cv{padding:130px var(--gut) 100px;max-width:1180px;margin:0 auto}
.cvhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;border-bottom:3px solid var(--fg);padding-bottom:26px}
.cvhead h1{margin:0;font-weight:900;font-variation-settings:'wdth' 62;font-size:calc(clamp(70px,10vw,150px) * var(--title-k,1));line-height:.82;text-transform:uppercase}
.cvhead .role{margin:12px 0 0;color:var(--grey)}
.cvhead dl{margin:0;display:grid;grid-template-columns:auto auto;gap:8px 18px;font:500 calc(12px * var(--label-k,1))/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cvhead dt{color:var(--grey)}
.cvhead dd{margin:0}
.cvsec{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;padding:26px 0;border-bottom:1px solid var(--line)}
.cvsec h2{margin:0;font:600 calc(12px * var(--label-k,1))/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.cvsec p{margin:0;font:400 calc(17px * var(--text-k,1))/1.6 var(--wall);max-width:70ch}
.cvrow{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;padding:0 0 14px;break-inside:avoid}
.cvrow .y{font:500 calc(12px * var(--label-k,1))/1.6 var(--mono);color:var(--grey);letter-spacing:.04em}
.cvrow b{font-weight:700}
.cvrow .w{color:var(--grey)}
.credits2{display:grid;grid-template-columns:1fr 1fr;gap:4px 34px}
.credits2 div{break-inside:avoid;padding:0 0 10px}
.credits2 b{display:block;font-weight:600}
.credits2 span{font:500 calc(11px * var(--label-k,1))/1.4 var(--mono);color:var(--grey);text-transform:uppercase;letter-spacing:.05em}
.cvbar{display:flex;justify-content:flex-end;gap:10px;margin-bottom:22px}
@media print{
  @page{margin:14mm}
  .nav,.grain,.cvbar,.contact,.foot-min,dialog{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .cv{padding:0!important}
  .cv *{color:#000!important;border-color:#bbb!important}
  .cvhead{border-bottom-color:#000!important}
  .cvrow,.credits2 div{break-inside:avoid}
}

/* ── the small footer on pages without the contact wall ───────────────── */
/* the not-found page: where to go instead */
.lost{padding:8px var(--gut) 120px}
.lost .links{display:flex;flex-wrap:wrap;gap:8px}
.foot-min{border-top:1px solid var(--line);padding:22px var(--gut);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 26px;
  font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.foot-min .links{display:flex;flex-wrap:wrap;gap:20px}
.foot-min .fm-l{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-min .fm-mail{text-decoration:underline;text-underline-offset:4px}
.foot-min a:hover{color:var(--rec)}

/* the film, with sound */
dialog{width:min(1120px,calc(100% - 32px));padding:0;border:0;background:transparent;color:#fff}
dialog::backdrop{background:rgba(0,0,0,.94)}
dialog .bar{display:flex;justify-content:space-between;gap:20px;margin-bottom:10px;font:500 calc(12px * var(--label-k,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
dialog .scr{position:relative;aspect-ratio:16/9;background:#000}
dialog iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:1100px){
  .about{grid-template-columns:1fr}
  .about .pile{height:420px;max-width:620px}
  .bins{grid-template-columns:1fr 1fr}
  .ccard{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--gut:16px}
  .nav{padding:14px var(--gut)}
  .nav nav{gap:12px;font-size:calc(10px * var(--label-k,1))}
  .stream{width:64vw;margin-left:-32vw}
  .vfh{inset:52px 10px 64px}
  .vfh .c{width:28px;height:28px}
  .hfoot{grid-template-columns:1fr auto;font-size:calc(10px * var(--label-k,1))}
  .hfoot .go{display:none}
  .what{padding:80px 0 60px}
  .shead{margin-bottom:36px}
  .dept{grid-template-columns:1fr;gap:10px;padding:14px var(--gut) 18px}
  .dn{font-size:calc(24vw * var(--title-k,1))}
  .tape span{font-size:38px;padding:0 16px}
  .tape.t2 span{font-size:24px}
  .selects{padding:70px 0 90px}
  .phead{padding:110px var(--gut) 40px}
  .phead .pwall p{font-size:30vw}
  .tabs{top:42px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs button{flex:none}
  .sticker{font-size:calc(clamp(17px,3.3vw,28px) * var(--text-k,1));padding:9px 13px 10px;border-width:2px;border-radius:9px}
  .sheet{grid-template-columns:minmax(0,1fr);gap:34px}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){border-left:0;padding-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .bins{grid-template-columns:1fr}
  .rn{font-size:13vw;white-space:normal}
  .rd{grid-column:1 / -1}
  .cv{padding:100px var(--gut) 80px}
  .cvhead{grid-template-columns:1fr}
  .cvsec,.cvrow{grid-template-columns:1fr;gap:8px}
  .credits2{grid-template-columns:1fr}
}


/* ── the Home banner: a small name and slogan at the top left, and the
   film running large below them. Amr's pick (2026-10-16): stacked, with
   the work bigger than the name. ── */
.lk-stack .name2{--stack:1;display:grid;justify-items:start;position:absolute;z-index:15;left:var(--gut);top:104px;margin:0;pointer-events:none;
  color:var(--fg);font-weight:900;font-variation-settings:'wdth' 62;line-height:.8;text-transform:uppercase}
.lk-stack .name2 i{font-style:normal;white-space:nowrap}
.lk-stack .w2{width:60vw}
.lk-stack .sticker{left:var(--gut);transform:rotate(-3deg);top:calc(var(--nb,300px) + 22px);
  font-size:clamp(14px,1.5vw,22px);padding:9px 14px 10px;border-width:2px;border-radius:9px}
/* the film rises the whole height of the banner and passes behind the
   name: it fades in at the foot, is full from the middle down, and thins
   out as it climbs past the slogan and the name, gone just under the top */
/* how far right of centre, where the fade starts and where the film is full
   are look settings at /admin (--film-x, --film-top, --film-full); the
   defaults are 6vw, 6% and 52% */
.lk-stack .stream{--ft:var(--film-top,6%);--ff:var(--film-full,52%);top:0;width:calc(min(1140px,74vw) * var(--film-w,1));margin-left:calc(min(1140px,74vw) * var(--film-w,1) / -2 + var(--film-x,6vw));overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent 0%,transparent var(--ft),rgba(0,0,0,0.05) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.152),rgba(0,0,0,0.16) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.283),rgba(0,0,0,0.34) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.413),rgba(0,0,0,0.56) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.543),rgba(0,0,0,0.76) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.674),rgba(0,0,0,0.92) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.848),#000 var(--ff),#000 84%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.55) 92%,rgba(0,0,0,0.22) 96%,transparent 100%);
          mask-image:linear-gradient(transparent 0%,transparent var(--ft),rgba(0,0,0,0.05) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.152),rgba(0,0,0,0.16) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.283),rgba(0,0,0,0.34) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.413),rgba(0,0,0,0.56) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.543),rgba(0,0,0,0.76) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.674),rgba(0,0,0,0.92) calc(var(--ft) + (var(--ff) - var(--ft)) * 0.848),#000 var(--ff),#000 84%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.55) 92%,rgba(0,0,0,0.22) 96%,transparent 100%)}
/* the name and slogan stay in front of everything that passes */
.lk-stack .name2{z-index:22;text-shadow:0 2px 28px rgba(0,0,0,.6)}
.lk-stack .sticker{z-index:23}
@media (prefers-reduced-motion:no-preference){ .lk-stack.arrive .sticker{animation:stick-l .5s .55s cubic-bezier(.2,1.4,.4,1) both} }
/* the banner is one screen tall again: the film runs behind the name */
@media (max-width:900px){
  .lk-stack .name2{top:96px}
  .lk-stack .w2{width:66vw}
  .lk-stack .sticker{top:calc(var(--nb,200px) + 18px)}
  .lk-stack .stream{width:96vw;margin-left:-48vw;
    /* here the film already fills a tall banner: keep it clear of the name */
    -webkit-mask-image:linear-gradient(transparent 0%,transparent 42%,rgba(0,0,0,0.05) 48%,rgba(0,0,0,0.16) 53%,rgba(0,0,0,0.34) 58%,rgba(0,0,0,0.56) 63%,rgba(0,0,0,0.76) 68%,rgba(0,0,0,0.92) 74%,#000 80%,#000 84%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.55) 92%,rgba(0,0,0,0.22) 96%,transparent 100%);
            mask-image:linear-gradient(transparent 0%,transparent 42%,rgba(0,0,0,0.05) 48%,rgba(0,0,0,0.16) 53%,rgba(0,0,0,0.34) 58%,rgba(0,0,0,0.56) 63%,rgba(0,0,0,0.76) 68%,rgba(0,0,0,0.92) 74%,#000 80%,#000 84%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.55) 92%,rgba(0,0,0,0.22) 96%,transparent 100%)}
}


/* ── What I do: each craft's own instrument. It runs while its row is on
   screen (.live) and pointing at the row pulls the VFX layers further apart. ── */
.wd-b .dept{grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(220px,320px);gap:40px;padding:26px var(--gut)}
.wd-b .dn{font-size:calc(clamp(84px,9.6vw,160px) * var(--title-k,1));opacity:.55;transition:opacity .25s,color .25s}
.wd-b .dept:hover .dn,.wd-b .dept:focus-within .dn{opacity:1}
.wd-b .ins{display:block;aspect-ratio:480/190;color:#D4D4D4}
[data-theme="light"] .wd-b .ins{color:#2A2A2A}
.wd-b .ins svg{display:block;width:100%;height:100%;overflow:visible}
.wd-b .ph{animation:wd-ph 9s linear infinite;animation-play-state:paused}
@keyframes wd-ph{to{transform:translateX(432px)}}
.wd-b .cd{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.wd-b .dept.live .ph,.wd-b .dept:hover .ph{animation-play-state:running}
.wd-b .dept.live .cd,.wd-b .dept:hover .cd{transform:translate(var(--dx),var(--dy))}
.wd-b .dept.live .ly{transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--i) * 30px))}
@media (hover:none){
  .wd-b .ph{animation-play-state:running}
  .wd-b .cd{transform:translate(var(--dx),var(--dy))}
}
.wd-b .stack{position:relative;display:block;width:100%;height:100%;perspective:900px}
.wd-b .ly{position:absolute;left:44%;top:56%;width:48%;aspect-ratio:16/9;outline:1px solid currentColor;
  transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--i) * 18px));
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.wd-b .ly img{display:block;width:100%;height:100%;object-fit:cover}
.wd-b .ly.plate img{filter:grayscale(1) brightness(.75)}
.wd-b .ly.matte img{filter:grayscale(1) contrast(7) brightness(1.3)}
.wd-b .ly.matte{mix-blend-mode:screen;opacity:.85}
.wd-b .ly.comp{outline-color:var(--rec)}
.wd-b .ly b{display:none}
.wd-b .lg{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid;gap:12px;font:600 calc(11px * var(--label-k,1))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.wd-b .lg i{font-style:normal;display:flex;align-items:center;gap:8px}
.wd-b .lg i::before{content:'';width:14px;height:9px;border:1px solid currentColor}
.wd-b .lg i.c{color:var(--rec)}
.wd-b .dept:hover .ly{transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--i) * 44px))}
@media (prefers-reduced-motion:reduce){ .wd-b .ph{animation:none} .wd-b .ly,.wd-b .cd{transition:none} }

@media (max-width:900px){ .wd-b .dept{grid-template-columns:1fr;gap:16px} }

/* the type wall thins out behind the name and slogan, so the name sits on
   near-black, and comes back to full strength lower in the banner */
.lk-stack .wall{-webkit-mask-image:linear-gradient(rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 40%,rgba(0,0,0,.6) 56%,#000 72%);
                mask-image:linear-gradient(rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 40%,rgba(0,0,0,.6) 56%,#000 72%)}

/* ── Tools: each tool on a monitor running a drawing of what it does ───── */
/* ── E: live demos ───────────────────────────────────────────────────────
   Every tool on a monitor, running a small drawing of what it does. The
   drawings sit still until the pointer reaches them; on touch screens,
   where there is no hover, they run on their own. */
.demos{list-style:none;margin:0;padding:20px var(--gut) 110px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(340px * var(--mon-k,1))),1fr));gap:52px 30px}
.mon{display:block;color:var(--fg);text-decoration:none}
.scr{display:block;position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#050505;border:12px solid #1A1A1A;
  box-shadow:0 0 0 1px #2c2c2c,0 26px 50px var(--shadow);transition:border-color .25s}
.scr::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.scr svg{display:block;width:100%;height:100%;color:var(--yellow)}
.scr svg *{animation-play-state:paused}
.mon:hover .scr svg *,.mon:focus-visible .scr svg *{animation-play-state:running}
@media (hover:none){ .scr svg *{animation-play-state:running} }
.mon:hover .scr,.mon:focus-visible .scr{border-color:var(--yellow)}
.mcap{display:grid;gap:7px;padding:16px 2px 0}
.mcap b{font-weight:900;font-variation-settings:'wdth' 62;font-size:calc(44px * var(--title-k,1));line-height:.9;text-transform:uppercase}
.mcap .txt{font:400 calc(15px * var(--text-k,1))/1.45 var(--wall);color:var(--grey)}
.mcap .m{font:500 calc(11px * var(--label-k,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.mcap .m i{font-style:normal;color:#8A8A8A;margin-right:8px}
.mcap .u{text-decoration:underline;text-underline-offset:4px}
.d *{transform-box:fill-box}
@media (prefers-reduced-motion:reduce){ .scr svg *{animation:none!important} }
/* frame extractor */
.d-scroll{animation:d-scroll 2.4s linear infinite}
@keyframes d-scroll{to{transform:translateX(-64px)}}
.d-lift{animation:d-lift 2.4s ease-in-out infinite}
@keyframes d-lift{0%,20%{transform:translateY(0);opacity:0}30%{opacity:1}70%,100%{transform:translateY(-54px) scale(1.15);opacity:1}}
/* cutsheet */
.d-type{stroke-dasharray:110;stroke-dashoffset:110;animation:d-type 3.2s linear infinite}
@keyframes d-type{0%{stroke-dashoffset:110}30%,100%{stroke-dashoffset:0}}
.d-cell{opacity:0;animation:d-cell 3.2s steps(1) infinite}
@keyframes d-cell{0%,35%{opacity:0}36%,100%{opacity:1}}
/* reframe */
.d-track{animation:d-track 3.6s ease-in-out infinite alternate}
@keyframes d-track{from{transform:translateX(-78px)}to{transform:translateX(78px)}}
/* filename */
.d-reveal{transform-origin:left center;animation:d-reveal 3.4s steps(20) infinite}
@keyframes d-reveal{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.d-caret{animation:d-caret 3.4s steps(20) infinite}
@keyframes d-caret{0%{transform:translateX(0)}70%,100%{transform:translateX(180px)}}
/* screener */
.d-head{animation:d-head 4s linear infinite}
@keyframes d-head{to{transform:translateX(240px)}}
/* each note drops as the playhead reaches it, and clears when it loops */
.d-m1{animation:d-m1 4s linear infinite}
.d-m2{animation:d-m2 4s linear infinite}
.d-m3{animation:d-m3 4s linear infinite}
@keyframes d-m1{0%,24.9%{opacity:0}25%,100%{opacity:1}}
@keyframes d-m2{0%,54.1%{opacity:0}54.2%,100%{opacity:1}}
@keyframes d-m3{0%,81.6%{opacity:0}81.7%,100%{opacity:1}}
/* spec sheet */
.d-bar{transform-origin:left center;animation:d-bar 2.8s cubic-bezier(.3,.7,.3,1) infinite alternate}
@keyframes d-bar{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
/* adshot */
.d-swap{animation:d-swap 3.6s ease-in-out infinite alternate}
@keyframes d-swap{0%,30%{transform:translateX(0)}70%,100%{transform:translateX(var(--dx))}}
/* slate */
.d-clap{transform-origin:left bottom;animation:d-clap 1.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes d-clap{0%,20%{transform:rotate(-22deg)}45%,100%{transform:rotate(0deg)}}
/* end credits */
.d-roll{animation:d-roll 6s linear infinite}
@keyframes d-roll{to{transform:translateY(-160px)}}


/* ── E in the site's own colours ─────────────────────────────────────────
   The rest of the site is light grey on black, with red for whatever is
   active: the REC buttons, the selected tab, the lit EDL event. So the
   drawings are grey, and each one's moving part is red. */
.demos .scr svg{color:var(--mon-ink,#D4D4D4)}
.demos .d-cell,.demos .d-bar,.demos .d-caret{fill:var(--rec)}
.demos .d-head,.demos .d-m1,.demos .d-m2,.demos .d-m3,.demos .d-lift,.demos .d-track rect,.demos .d-clap path{stroke:var(--rec)}
.demos .mon:hover .scr,.demos .mon:focus-visible .scr{border-color:var(--rec)}

/* ── look settings at /admin that need a rule of their own (the rest are the
   variables --rec, --yellow, --grain, --film-*, --tilt, --wall-k, --tape-k) ── */
/* the banner's frames: their tilt scales; 0 stands them straight */
.stream .ff{transform:translateX(var(--x,0%)) rotate(calc(var(--r,0deg) * var(--tilt,1)))}
/* the huge grey words behind the banner */
.lk-stack .wall{opacity:var(--wall-k,1)}
/* tapes stopped */
[data-tapes="still"] .tape-run{animation-play-state:paused}
/* What I do's instruments at rest: no playhead, dots centred, layers flat */
[data-instruments="off"] .wd-b .dept .ph{animation-play-state:paused}
[data-instruments="off"] .wd-b .dept .cd{transform:none}
[data-instruments="off"] .wd-b .dept .ly{transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--i) * 18px))}
/* Selects without its edge fade */
[data-selects-fade="off"] .strip-wrap{-webkit-mask-image:none;mask-image:none}
/* the Tools screens: when the drawings play, and their scan lines */
[data-tools-play="always"] .demos .scr svg *{animation-play-state:running}
[data-tools-play="still"] .demos .scr svg *{animation-play-state:paused!important}
[data-tools-lines="off"] .demos .scr::after{display:none}
/* ── the light theme's own corrections ── */
/* the corner marks and the role line blend by difference on the dark banner; over the light page that blend has nothing to bite on */
[data-theme="light"] .vfh .c{border-color:var(--fg);mix-blend-mode:normal}
[data-theme="light"] .hfoot .who{color:var(--fg);mix-blend-mode:normal}
/* Selects is the lightbox table the roll lies on; the roll and its captions stay film */
[data-theme="light"] .selects{color:var(--fg)}
/* shadows a lightbox would cast: short and soft */
[data-theme="light"] .sticker{box-shadow:0 12px 28px rgba(0,0,0,.22)}