/* LAB · the right side of 0001, shared by every variation in this folder.
   The doorway (her film) and the light it throws on the room, exactly as on
   the live page. Each variation only rebuilds the left side. */

:root{
  --ink:#131111;
  --bone:#F3F4F3;
  --dim:rgba(243,244,243,.56);
  --faint:rgba(243,244,243,.16);
  --ikb:#2454B9;
  --display:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --body:'Spectral',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --farsi:'Vazirmatn','Tahoma',sans-serif;
  --pad-x:clamp(20px,3.2vw,60px);
  --pad-y:clamp(20px,3.4vh,40px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' exponent='6'/%3E%3CfeFuncG type='gamma' exponent='6'/%3E%3CfeFuncB type='gamma' exponent='6'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ink);color:var(--bone);min-height:100%}
body{font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--bone);color:var(--ink)}
a{color:inherit}

#plate{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
#grain{position:fixed;top:-130px;left:-130px;width:calc(100% + 260px);height:calc(100% + 260px);z-index:2;pointer-events:none;
  background-image:var(--grain);background-size:220px 220px;mix-blend-mode:screen;opacity:.22;will-change:transform;
  animation:agitate 1.02s steps(1,end) infinite}
@keyframes agitate{0%{transform:translate3d(0,0,0)}12.5%{transform:translate3d(-17px,11px,0)}25%{transform:translate3d(9px,-21px,0)}37.5%{transform:translate3d(-25px,-8px,0)}50%{transform:translate3d(14px,17px,0)}62.5%{transform:translate3d(-6px,-15px,0)}75%{transform:translate3d(21px,6px,0)}87.5%{transform:translate3d(-12px,22px,0)}100%{transform:translate3d(0,0,0)}}

/* the doorway */
#gate{position:fixed;right:var(--pad-x);top:12.5vh;width:min(24vw,400px);height:74vh;overflow:hidden;background:#000;z-index:3}
#gate video{width:100%;height:100%;object-fit:cover;display:block}
/* a caption under the door, the film's own title: the one addition on the right */
#gate-cap{position:fixed;right:var(--pad-x);top:calc(12.5vh + 74vh + 12px);width:min(24vw,400px);z-index:3;
  display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-weight:300;font-size:10.5px;letter-spacing:.06em;color:var(--dim);text-transform:lowercase}
#gate-cap .tc{font-variant-numeric:tabular-nums}

/* small mono voice shared by all variations */
.mono{font-family:var(--mono);font-weight:300;font-size:clamp(10px,.76vw,12px);line-height:1.8;letter-spacing:.045em;text-transform:lowercase}
.tally{display:inline-block;width:6px;height:6px;margin-right:9px;background:var(--ikb);transition:opacity .7s}
.tally.off{opacity:.3}
.fa{font-family:var(--farsi);font-weight:300;direction:rtl}

.frame{position:absolute;inset:0;z-index:4}

@media (min-width:900px) and (min-height:640px){ html,body{height:100%;overflow:hidden} }
@media (max-width:899px), (max-height:639px){
  #gate{position:relative;right:auto;top:auto;width:100%;height:auto;aspect-ratio:4/5}
  #gate-cap{position:static;width:auto;margin-top:10px}
  #grain{opacity:.36}
}
@media (prefers-reduced-motion:reduce){ #grain{animation:none} .tally{transition:none} }

/* the original top-right row of rooms, for variations that keep it */
.wings{position:fixed;top:var(--pad-y);right:var(--pad-x);padding-right:34px;z-index:5;text-align:right}
.wings a{text-decoration:none;opacity:.78;border-bottom:1px solid transparent;padding-bottom:2px;transition:opacity .42s,border-color .42s}
.wings a:hover,.wings a:focus-visible{opacity:1;border-bottom-color:currentColor}
.wings .sep{opacity:.3;padding:0 .5em}
@media (max-width:899px), (max-height:639px){ .wings{position:static;text-align:left;padding:0;margin:0 0 24px} }