@font-face{font-family:Oilvare;src:url(/assets/fonts/oilvare.woff2) format('woff2');font-display:block}
@font-face{font-family:'Open Sauce';font-weight:400;src:url(/assets/fonts/opensauce-regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Open Sauce';font-weight:500;src:url(/assets/fonts/opensauce-medium.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Open Sauce';font-weight:700;src:url(/assets/fonts/opensauce-bold.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Open Sauce';font-weight:900;src:url(/assets/fonts/opensauce-black.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Open Sauce';font-style:italic;font-weight:400;src:url(/assets/fonts/opensauce-italic.woff2) format('woff2');font-display:swap}
:root{
  --paper:#F3F3F0; --ink:#1E1E1E; --rule:rgba(10,10,10,.1); --rule-strong:rgba(10,10,10,.28);
  --f-title:'Open Sauce', system-ui, sans-serif;
  --f-body:'Open Sauce', system-ui, sans-serif;
  --f-display:Oilvare, 'Arial Black', sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --head:64px; --foot:56px; --gap:46px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper)}
html,body{color:var(--ink);height:100%}
/* the paper: off-white cold-press, fixed to the window */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url(/assets/paper.webp) 0 0/1024px 1024px repeat}
body{font-family:var(--f-body);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
.label{font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- header ---------- */
.bar{position:fixed;left:0;right:0;top:0;height:var(--head);z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;
  border-bottom:1px solid var(--rule-strong);background:var(--paper)}
.bar > :last-child{justify-self:end}
#brand{display:block;height:38px;width:auto;color:var(--ink)}
.contact{padding:4px 0;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px}
.contact:hover{text-decoration-thickness:3px}
.contact.is-here{text-decoration-thickness:3px}

/* ---------- background: ruled lines, the row's own line a little darker ---------- */
.rules{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(var(--rule-strong),var(--rule-strong)) 0 var(--line-at,50%)/100% 1px no-repeat,
    repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px var(--gap)) 0 calc(var(--line-at,50%) - 20*var(--gap))/100% calc(40*var(--gap)) no-repeat}
html.line-v .rules{background:
    linear-gradient(var(--rule-strong),var(--rule-strong)) 50% 0/1px 100% no-repeat,
    repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px var(--gap)) 0 0/100% 100%}
/* film-strip ticks along the row, drifting with it */
#ticks{position:fixed;left:0;right:0;height:9px;top:calc(var(--line-at) + var(--row-h)/2 + 10px);pointer-events:none;z-index:1;
  background:
    repeating-linear-gradient(to right,var(--rule-strong) 0 1px,transparent 1px 60px) 0 0/auto 9px repeat-x,
    repeating-linear-gradient(to right,var(--rule-strong) 0 1px,transparent 1px 12px) 0 5px/auto 4px repeat-x}
html.line-v #ticks{left:calc(50% + var(--row-h) * .9);right:auto;top:0;bottom:0;height:auto;width:9px;
  background:
    repeating-linear-gradient(to bottom,var(--rule-strong) 0 1px,transparent 1px 60px) 0 0/9px auto repeat-y,
    repeating-linear-gradient(to bottom,var(--rule-strong) 0 1px,transparent 1px 12px) 0 0/4px auto repeat-y}
.hud{position:fixed;z-index:30;pointer-events:none;font-family:var(--f-title);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase}

#tc{top:calc(var(--head) + 22px);left:20px;font-variant-numeric:tabular-nums}

/* ---------- the row ---------- */
.stage{position:fixed;inset:0;overflow:hidden}
.mc{position:absolute;left:0;top:0;display:block;transform-origin:0 0;will-change:transform}
.mc canvas,.mc-still{display:block;width:100%;height:100%;user-select:none}
.mc.heroed canvas{visibility:visible}
.mc:not(.on){cursor:pointer}
.mc-no{position:absolute;left:0;bottom:calc(100% + 4px);font-family:var(--f-title);font-weight:700;font-size:9px;letter-spacing:.06em;transition:opacity .3s}
.mc.big .mc-no{opacity:0}
.mc .art{position:absolute}
.mc-hero{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;pointer-events:none;z-index:21;transition:opacity .25s}
.mc-hero.on{opacity:1}
.mc-hero video{display:block;width:100%;height:100%;object-fit:fill;-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* the playhead: a hairline up through the row, the scribble at its foot */
#playhead{position:fixed;left:0;top:var(--head);bottom:var(--foot);width:0;z-index:45;pointer-events:none;will-change:transform}
#playhead::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--ink);opacity:.55}
#playhead img{position:absolute;left:-17px;bottom:-17px;width:34px;mix-blend-mode:multiply}
html.line-v #playhead{top:0;left:0;right:0;bottom:auto;height:0;width:auto}
html.line-v #playhead::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
html.line-v #playhead img{left:auto;right:8px;bottom:auto;top:-14px;width:28px}

/* stills of each site, tucked behind its machine (always behind the machines) */
.stills{position:fixed;inset:0;overflow:hidden;z-index:2;pointer-events:none}
.stage{z-index:3}
.st img{position:absolute;left:0;top:0;width:400px;height:auto;transform-origin:0 0;will-change:transform,opacity;display:block}

/* the DS: its screens are images, with buttons laid over the drawn ones */
.ds{position:absolute;inset:0;container-type:inline-size;font-family:'Caveat',cursive}
.ds-img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.ds-top{position:absolute;left:22.5%;top:11%;width:55.25%;height:33.17%;background:#FBFBFB center/cover no-repeat}
.ds-hot{position:absolute;background:none;border:0;padding:0;border-radius:8px;cursor:pointer}
.ds-hot:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.ds-ok{left:35%;top:62%;width:26%;height:25%;border-radius:50%}
.ds-love{left:33%;top:59%;width:36%;height:14%}
.ds-hate{left:33%;top:75%;width:36%;height:16%}
.ds-field{position:absolute;left:29.5%;top:75.4%;width:42%;height:5.4%;font-size:0;line-height:0}   /* sits on the drawn dotted line */
.ds-in{display:block;width:100%;height:100%;background:none;border:0;outline:none;caret-color:transparent;font:500 4.6cqw 'Caveat',cursive;color:var(--ink);padding:0 0 0 .2em;line-height:1}
.ds-next{position:absolute;right:0;top:135%;background:none;border:0;padding:0;font:500 4.6cqw 'Caveat',cursive;color:var(--ink);text-decoration:underline;text-decoration-thickness:calc(1.2px / var(--k,1));text-underline-offset:.15em;cursor:pointer}
.ds-caret{position:absolute;left:0;top:12%;height:76%;width:calc(1.4px / var(--k,1));background:var(--ink);display:none;animation:caret 1s steps(1) infinite;pointer-events:none}
.ds-field.typing .ds-caret{display:block}
@keyframes caret{50%{opacity:0}}
.ds-note{position:absolute;left:0;top:135%;font:500 3.8cqw 'Caveat',cursive;color:#c0392b;white-space:nowrap}

/* ---------- footer: counter / name / view project ---------- */
.foot{position:fixed;left:0;right:0;bottom:0;height:var(--foot);z-index:40;background:var(--paper);border-top:1px solid var(--rule-strong);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px}
#count{font-variant-numeric:tabular-nums}
#now{font-family:var(--f-title);font-weight:700;font-size:17px;letter-spacing:-.01em;padding:8px 14px}
#now:hover{text-decoration:underline;text-underline-offset:.2em}
#scrollTag{justify-self:end;cursor:pointer;pointer-events:auto;background:none;border:0;color:inherit}
#scrollTag:hover{text-decoration:underline;text-underline-offset:.25em}

/* ---------- loader + opening ---------- */
#intro{position:fixed;inset:0;z-index:100;background:var(--paper);isolation:isolate;overflow:hidden;transition:opacity .6s ease}
html.intro-on #intro:not(.lit){background:#000}
html #intro.lit{background:transparent}
#intro.gone{opacity:0;pointer-events:none}
/* the percentage: in the U while CLUMP fills the screen, or on its own on repeat visits */
#ldPct{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--f-title);font-weight:700;font-size:13px;mix-blend-mode:difference;
  letter-spacing:.08em;font-variant-numeric:tabular-nums;transition:opacity .3s}
#intro.filled #ldPct{left:0;top:0;color:#fff;z-index:2}   /* difference: white on black, black on the letters */
#ldPct.gone{opacity:0}
#introWord{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;will-change:transform}
#introWord.on{opacity:1}
#introWord canvas{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#intro.lit #introWord canvas,#intro.holing #introWord canvas{filter:brightness(.118)}
html.intro-on #intro.holing:not(.lit){background:transparent}
#introVeil{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
#introGlow{position:absolute;left:0;top:0;transform-origin:50% 50%;mix-blend-mode:difference;opacity:0;will-change:transform}
html.intro-on #brand{visibility:hidden}
html.intro-on:not(.intro-glide) .bar .label,html.intro-on:not(.intro-glide) .bar .contact,
html.intro-on:not(.intro-glide) .stage,html.intro-on:not(.intro-glide) .foot,
html.intro-on:not(.intro-glide) .hud,html.intro-on:not(.intro-glide) #playhead,html.intro-on:not(.intro-glide) #ticks,html.intro-on:not(.intro-glide) .stills{opacity:0}
.bar .label,.bar .contact,.stage,.foot,.hud,#playhead,#ticks,.stills{transition:opacity 1s var(--ease)}

/* ---------- page transition: a block of colour, right to left ---------- */
.wipe{position:fixed;inset:0;z-index:300;transform:translate3d(100%,0,0);transition:transform .8s var(--ease-io);pointer-events:none}
.wipe.cover{transform:none}
html.wiping::after{content:'';position:fixed;inset:0;z-index:300;background:var(--wipe,#0A0A0A);pointer-events:none;
  transform:none;transition:transform 1.1s var(--ease-io)}
html.wipe-out::after{transform:translate3d(-100%,0,0)}

@media (max-width:700px){
  :root{--head:56px;--foot:52px;--gap:40px}
  #brand{height:28px}
  .bar{grid-template-columns:auto 1fr auto}
  .bar > .label:first-child{display:none}
  .bar > a:nth-child(2){justify-self:center}
  #now{font-size:15px}
  #tc{display:none}
  #scrollTag .arr{display:none}
}
@media (prefers-reduced-motion: reduce){
  .cl img{animation:none}
  .wipe,html.wiping::after{transition:none}
}


/* ================= home: the field ================= */
/* crosshair cursor everywhere */
html,html *{cursor:crosshair!important}
.dots{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(10,10,10,.24) 1px,transparent 1.35px) 0 0/28px 28px}
.field{position:fixed;inset:0;z-index:2;overflow:hidden}
.mc-bg{opacity:.85}
.brand-mid{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}
.brand-mid #brand{height:clamp(70px,12vw,180px);width:auto}
.stills{z-index:3}
.stage{z-index:4}
.labels{position:fixed;inset:0;z-index:6;pointer-events:none}
.plabel{position:absolute;left:0;top:0;pointer-events:auto;white-space:nowrap;will-change:transform,opacity}
.pl-text{display:inline-block;font-family:var(--f-title);font-weight:700;font-size:16px;letter-spacing:-.01em;background:var(--paper);padding:1px 4px}
.plabel.left .pl-text{transform:translateX(-100%)}
.pl-line{position:absolute;left:0;top:50%;height:1px;background:var(--ink);transform-origin:0 0;opacity:.75}

/* page furniture, plain text, in the empty corners either side of the diagonal */
.ui{position:fixed;z-index:30;background:var(--paper);border:0;color:var(--ink);padding:2px 5px;box-shadow:0 0 0 4px var(--paper)}
#studio{top:5.5vh;right:9vw}
#contactLink{top:11vh;right:4vw;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px}
.bar .contact,#contactLink{border:0;border-radius:0;background:none}
#tc{top:20vh;right:14vw;left:auto;font-variant-numeric:tabular-nums;opacity:.7}
#count{bottom:24vh;left:4vw;font-variant-numeric:tabular-nums}
#now{bottom:16vh;left:8vw;font-size:15px;text-transform:none;letter-spacing:-.01em}
#now:empty{display:none}
/* Scroll: bigger, with an arrow nudging down the diagonal; gone once you've started */
#scrollTag{top:22vh;left:4vw;font-size:18px;letter-spacing:.08em;display:flex;align-items:center;gap:10px;transition:opacity .6s var(--ease)}
#scrollTag .arr{display:inline-block;font-size:26px;animation:nudge 1.4s var(--ease-io) infinite}
#scrollTag.used{opacity:0;pointer-events:none}
#scrollTag .arr-m{display:none}
@keyframes nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,6px)}}
@media (max-width:700px){
  .brand-mid #brand{height:clamp(56px,20vw,90px)}
  #studio{top:18px;left:16px;right:auto;font-size:10px}
  #contactLink{top:16px;right:16px}
  #tc{display:none}
  #count{bottom:auto;top:46vh;left:12px;font-size:10px;writing-mode:vertical-rl}
  #now{bottom:64px;left:14px}
  #scrollTag{top:auto;bottom:24px;left:50%;transform:translateX(-50%);font-size:15px}
  #scrollTag .arr-d{display:none}
  #scrollTag .arr-m{display:inline-block;animation-name:nudgeDown}
  .pl-text{font-size:14px}
}
@keyframes nudgeDown{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
html.intro-on:not(.intro-glide) .ui,html.intro-on:not(.intro-glide) .dots,html.intro-on:not(.intro-glide) .labels,html.intro-on:not(.intro-hole) .field{opacity:0}
.ui,.dots,.labels,.field{transition:opacity 1s var(--ease)}
.ds[data-f="5b"] .ds-ok,.ds[data-f="5c"] .ds-ok{left:24%;top:57%;width:48%;height:34%;border-radius:12px}

/* phones: the block runs well past the top and bottom, so it covers the page under the browser's bars too */
@media (max-width:700px){ .wipe,html.wiping::after{inset:-25vh 0} }

/* the crosshair everywhere, over links and computers too */
html,html *{cursor:crosshair!important}

/* while a page comes in under the block, the page's own background (which phones show behind their bars) is the block's colour */
html.wiping:not(.wipe-out){background-color:var(--wipe,#0A0A0A)}
@media (max-width:700px){ html.page{overflow-x:clip} }