/* ============================================================
   BRICSMARK
   The panel powers on. You break it. You fall inside it.
   Black ground, white type, yellow signal.
   ============================================================ */

:root{
  /* page palette. flips with the theme */
  --black:#141414;
  --coal:#1B1B1B;
  --carbon:#242424;
  --line:#333;
  --smoke:#8C8681;
  --white:#E9E1D8;
  --yellow:#F0562A;
  --yellow-deep:#C0431C;
  --ground-fade:rgba(20,20,20,0);

  /* the new system */
  --ink:#181818;
  --ink-deep:#0D0D0D;
  --paper:#E7DED5;
  --paper-hi:#F3EDE6;
  --flare:#F0562A;
  --flare-deep:#BE3F17;

  /* screen palette. never flips, a display is a display */
  --scr-white:#F4F3EF;
  --scr-black:#0B0B0A;

  /* the room the set is in */
  --floor-near:#1B1B19;
  --floor-far:#0D0D0C;
  --horizon:rgba(244,243,239,.13);
  --stand-top:#24241F;
  --stand-face:#0F0F0E;
}

html[data-theme="light"]{
  --ground-fade:rgba(231,222,213,0);
  --black:#E7DED5;
  --coal:#DED4CA;
  --carbon:#D4C9BE;
  --line:#C9BEB2;
  --smoke:#6B635B;
  --white:#181818;
  --yellow:#F0562A;
  --yellow-deep:#BE3F17;

  --floor-near:#EAE8E2;
  --floor-far:#FAF9F7;
  --horizon:rgba(11,11,10,.12);
  --stand-top:#E6E4DD;
  --stand-face:#CFCCC4;
}
html[data-theme="light"] .bg__scan{opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.055) 0 1px,rgba(0,0,0,0) 1px 3px)}
html[data-theme="light"] .bg__pix{
  background:repeating-linear-gradient(to right,rgba(0,0,0,.032) 0 1px,rgba(0,0,0,0) 1px 3px)}
html[data-theme="light"] .bg__vig{box-shadow:inset 0 0 clamp(90px,16vw,280px) rgba(0,0,0,.05)}
html[data-theme="light"] .bg__glow{
  background:radial-gradient(ellipse at center,rgba(240,86,42,.11),rgba(240,86,42,0) 68%)}
html[data-theme="light"] .grain{opacity:.04;mix-blend-mode:multiply}
html[data-theme="light"] .chans__static{
  background:
    repeating-linear-gradient(to bottom,rgba(11,11,10,.22) 0 2px,rgba(0,0,0,0) 2px 4px),
    repeating-linear-gradient(to right,rgba(190,63,23,.3) 0 3px,rgba(0,0,0,0) 3px 7px)}
/* the sign off inverts, so the transmission still ends in the dark */
html[data-theme="light"] .off{background:var(--scr-black);color:var(--scr-white);border-top:0}
html[data-theme="light"] .off .label{color:rgba(244,243,239,.6)}
html[data-theme="light"] .off__bar{border-top-color:rgba(244,243,239,.2)}

:root{

  /* a serif with enough weight in the thins to survive the scanlines,
     and a grotesque that stays readable when it is letterspaced small */
  --display:'Playfair Display','Times New Roman',Georgia,serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --text:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'Archivo','Helvetica Neue',Arial,sans-serif;

  --gut:clamp(18px,4vw,56px);
  --snap:cubic-bezier(.2,.9,.2,1);
  --ease:cubic-bezier(.16,1,.3,1);
  --rule:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--black);color:var(--white);
  font-family:var(--text);line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden;height:100dvh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

.label{
  font-family:var(--mono);font-size:clamp(9px,1vw,11px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);
}
.label--w{color:var(--white)}
.label--y{color:var(--yellow)}

/* ============================================================
   THE GROUND :: the site is the inside of the panel
   ============================================================ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--black)}
.bg__glow{
  position:absolute;left:50%;top:0;width:min(1500px,130vw);height:80vh;
  transform:translate(-50%,-34%);
  background:radial-gradient(ellipse at center,rgba(240,86,42,.055),rgba(240,86,42,0) 68%);
  filter:blur(30px);will-change:transform;
}
.bg__scan{
  position:absolute;inset:0;opacity:.55;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.42) 0 1px,rgba(0,0,0,0) 1px 3px);
}
.bg__pix{
  position:absolute;inset:0;
  background:repeating-linear-gradient(to right,rgba(244,243,239,.028) 0 1px,rgba(0,0,0,0) 1px 3px);
}
.bg__vig{position:absolute;inset:0;box-shadow:inset 0 0 clamp(90px,16vw,280px) rgba(0,0,0,.85)}
.grain{
  position:fixed;inset:0;z-index:96;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   ACT 1 :: THE PANEL
   ============================================================ */
.intro{
  position:fixed;inset:0;z-index:70;background:var(--black);overflow:hidden;
  display:block;padding:0;
}
.intro.gone{display:none}
.intro__nav{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:clamp(16px,2.4vw,28px) var(--gut);
}
.intro__mark{
  font-family:var(--display);font-weight:800;color:#F4F3EF;
  font-size:clamp(15px,1.5vw,19px);letter-spacing:-.02em;text-transform:uppercase;
}
.set{position:absolute;inset:0;display:block;overflow:hidden;padding:0;background:#070706}
/* the room bleeds past its own edges so a portrait window never shows black */
.set__fill{
  position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;z-index:0;
  filter:blur(40px) saturate(.5) brightness(.52);pointer-events:none;
}
.room{z-index:1}
/* a scrim so the title card reads over the desk */
.set::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:2;
  background:linear-gradient(to top,rgba(4,4,3,.8),rgba(4,4,3,.3) 44%,rgba(4,4,3,0));
  pointer-events:none;transition:opacity .6s linear;
}
@media (max-width:760px){ .set::after{height:24%} }
.intro.zoomed .set::after{opacity:0}

/* ---- the room is a photograph, and the screen is cut out of it ---- */
.room{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  transform-origin:51.70% 47.42%;   /* the centre of the tube */
  will-change:transform;
}
.room__img{
  width:100%;height:100%;display:block;object-fit:fill;
  filter:saturate(.58) brightness(.78) contrast(1.06);
}
/* knock the green cast back and relight the room from our screen */
.room__tint{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 22% at 51.7% 47.4%,rgba(240,86,42,.14),rgba(240,86,42,0) 68%),
    linear-gradient(rgba(11,11,10,.3),rgba(11,11,10,.46));
}
.room__glow{
  position:absolute;left:51.7%;top:47.4%;width:86%;height:62%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 38% 34% at 50% 50%,rgba(240,86,42,.3),rgba(240,86,42,0) 66%);
  filter:blur(26px);transition:opacity 1.2s var(--ease);mix-blend-mode:screen;
}
.is-on .room__glow{opacity:1}

/* the tube face, traced from the green in the photograph */
.rig{
  position:absolute;left:34.15%;top:37.61%;width:35.24%;height:19.74%;
  z-index:1;
}
.panel{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;background:none;border:0;border-radius:0;box-shadow:none;
  cursor:crosshair;display:block;
  clip-path:polygon(29.54% -1.76%,2.67% 1.13%,0.26% 4.02%,-0.54% 6.91%,-0.94% 9.80%,-0.94% 12.70%,-0.94% 15.59%,-1.35% 18.48%,-1.35% 21.37%,-1.35% 24.26%,-1.35% 27.15%,-1.35% 30.04%,-1.75% 32.93%,-1.75% 35.82%,-1.75% 38.72%,-1.75% 41.61%,-1.75% 44.50%,-1.75% 47.39%,-1.75% 50.28%,-1.75% 53.17%,-1.75% 56.06%,-1.75% 58.95%,-1.75% 61.84%,-1.75% 64.74%,-1.75% 67.63%,-1.75% 70.52%,-1.75% 73.41%,-1.35% 76.30%,-1.35% 79.19%,-1.35% 82.08%,-1.35% 84.97%,-0.94% 87.86%,-0.94% 90.75%,-0.54% 93.65%,0.26% 96.54%,3.87% 99.43%,27.94% 101.74%,73.67% 101.74%,96.14% 99.43%,100.15% 96.54%,100.55% 93.65%,100.95% 90.75%,100.95% 87.86%,101.35% 84.97%,101.35% 82.08%,101.35% 79.19%,101.75% 76.30%,101.75% 73.41%,101.75% 70.52%,101.75% 67.63%,101.75% 64.74%,101.75% 61.84%,101.75% 58.95%,101.75% 56.06%,101.75% 53.17%,101.75% 50.28%,101.75% 47.39%,101.75% 44.50%,101.75% 41.61%,101.75% 38.72%,101.35% 35.82%,101.35% 32.93%,101.35% 30.04%,101.35% 27.15%,101.35% 24.26%,100.95% 21.37%,100.95% 18.48%,100.95% 15.59%,100.55% 12.70%,100.55% 9.80%,100.15% 6.91%,99.35% 4.02%,95.33% 1.13%,67.25% -1.76%);
}
.screen{position:relative;width:100%;height:100%;overflow:hidden;background:#050504}
/* a little tube curvature and glass on top of our picture */
.tube{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 70% at 50% 44%,rgba(255,255,255,0) 58%,rgba(0,0,0,.5) 100%),
    linear-gradient(104deg,rgba(255,255,255,.08) 0 18%,rgba(255,255,255,0) 44%);
}
.panel:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.screen{position:relative;width:100%;height:100%;overflow:hidden;background:#050504;border-radius:1px}

.boot{
  position:absolute;left:0;right:0;top:50%;height:2px;background:#FFF;opacity:0;
  transform:translateY(-50%) scaleX(0);box-shadow:0 0 24px 6px rgba(255,236,150,.8);
}
.is-booting .boot{animation:bootline 780ms var(--snap) forwards}
@keyframes bootline{
  0%{opacity:0;transform:translateY(-50%) scaleX(0) scaleY(1)}
  6%{opacity:1;transform:translateY(-50%) scaleX(.04) scaleY(1)}
  26%,36%{opacity:1;transform:translateY(-50%) scaleX(1) scaleY(1)}
  86%{opacity:1;transform:translateY(-50%) scaleX(1) scaleY(230)}
  100%{opacity:0;transform:translateY(-50%) scaleX(1) scaleY(230)}
}

.bars{position:absolute;inset:0;display:flex;opacity:0}
.bars i{flex:1}
.is-bars .bars{opacity:1}
.bars__tag{
  position:absolute;left:0;right:0;bottom:0;height:22%;background:#0A0A09;color:var(--scr-white);
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(12px,1.6vw,22px);
  font-family:var(--mono);font-size:max(7px,calc(var(--u,4px) * 1.9));letter-spacing:.2em;
}

.live{
  position:absolute;inset:0;opacity:0;color:var(--scr-white);
  background:radial-gradient(ellipse at 50% 42%,#1B1B18 0%,#0C0C0B 62%,#040403 100%);
  transition:opacity .34s linear;
}
.is-on .live{opacity:1}
.live__hud{
  position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 clamp(14px,1.8vw,26px);
  font-family:var(--mono);font-size:max(7px,calc(var(--u,4px) * 1.85));
  letter-spacing:.18em;text-transform:uppercase;color:rgba(244,243,239,.6);
}
.live__hud--t{top:calc(var(--u,4px) * 4.4)}
.live__hud--b{bottom:calc(var(--u,4px) * 4.4)}
.rec{display:inline-flex;align-items:center;gap:7px;color:var(--scr-white)}
.rec b{
  width:calc(var(--u,4px) * 1.5);height:calc(var(--u,4px) * 1.5);min-width:5px;min-height:5px;
  border-radius:50%;background:#FF3B2E;
  box-shadow:0 0 calc(var(--u,4px) * 1.6) rgba(255,59,46,.85);
  animation:pulse 1.7s var(--ease) infinite;
}
/* the tally light goes out once the camera has arrived */
.rec{transition:opacity .9s linear}
.zoom-done .rec{opacity:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.live__centre{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:calc(var(--u,4px) * 2.4);text-align:center;padding:0 5%;
}
.live__word{
  font-family:var(--display);font-weight:900;
  font-size:calc(var(--u,4px) * 12.4);line-height:.86;
  letter-spacing:-.045em;text-transform:uppercase;
}
.live__tick{position:relative;height:1.6em;overflow:hidden;width:100%}
.live__tick span{
  position:absolute;left:0;right:0;top:0;
  font-family:var(--mono);font-size:max(7px,calc(var(--u,4px) * 2.05));
  letter-spacing:.24em;text-transform:uppercase;color:var(--yellow);
  opacity:0;transform:translateY(60%);
  transition:opacity .2s linear,transform .42s var(--snap);
}
.live__tick span.on{opacity:1;transform:translateY(0)}
.third{
  position:absolute;left:0;bottom:16%;display:flex;align-items:stretch;
  transform:translateX(-102%);transition:transform .7s var(--snap);
}
.is-on .third{transform:translateX(0)}
.third i{width:clamp(4px,.5vw,7px);background:var(--yellow)}
.third span{
  background:var(--scr-white);color:var(--scr-black);
  padding:calc(var(--u,4px) * 1.1) calc(var(--u,4px) * 2.2);
  font-family:var(--mono);font-size:max(7px,calc(var(--u,4px) * 1.85));
  letter-spacing:.2em;text-transform:uppercase;
}

.scan{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.3) 0 1px,rgba(0,0,0,0) 1px 3px);
  transition:opacity .5s linear}
.is-on .scan,.is-broken .scan{opacity:.55}
.pix{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(to right,rgba(255,255,255,.035) 0 1px,rgba(255,255,255,0) 1px 3px);
  transition:opacity .5s linear}
.is-on .pix,.is-broken .pix{opacity:1}
.vig{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 clamp(40px,7vw,110px) rgba(0,0,0,.78)}
.glass{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.06) 0 22%,rgba(255,255,255,0) 46%)}
.flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0}

/* the camera pushes in until the screen is the whole screen */

.intro.zoomed .caption,
.intro.zoomed .intro__nav{opacity:0;pointer-events:none;transition:opacity .55s linear}
.hint{
  position:absolute;left:50%;bottom:31%;z-index:6;transform:translate(-50%,10px);
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:max(7px,calc(var(--u,4px) * 1.95));letter-spacing:.24em;
  text-transform:uppercase;color:rgba(244,243,239,.72);
  opacity:0;pointer-events:none;
  transition:opacity .9s linear 5s,transform 1s var(--snap) 5s;
}
.hint b{width:6px;height:6px;background:var(--yellow);animation:pulse 1.5s var(--ease) infinite}
.zoomed .hint{opacity:1;transform:translate(-50%,0)}
.is-broken .hint{opacity:0;transition:opacity .15s linear}

/* pixels waking under the cursor, until the glass goes */
.pxfx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s linear}
.is-on .pxfx{opacity:1}
.is-broken .pxfx{opacity:0;transition:opacity .18s linear}

.shards{position:absolute;inset:0}
.shard{position:absolute;inset:0;will-change:transform,opacity}
.shard>*{position:absolute;inset:0;opacity:1}
.cracks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cracks{filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 11px rgba(255,255,255,.6))}
.cracks path{fill:none;stroke:#fff;stroke-width:1.3;vector-effect:non-scaling-stroke}
.cracks path.u{stroke:rgba(0,0,0,.8);stroke-width:3;filter:none}
.bleed{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.bleed i{position:absolute;border-radius:50%;filter:blur(7px)}
.dead{position:absolute;inset:0;pointer-events:none}
.dead i{position:absolute;left:0;right:0;background:#040403}
.is-broken .third{opacity:.3}

/* the signal coming through the break */
.through{
  position:absolute;left:0;top:0;width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;transform:scale(0);opacity:0;
  background:radial-gradient(circle,#fff 40%,rgba(255,255,255,.9) 64%,rgba(255,255,255,0) 73%);
  box-shadow:0 0 90px 34px rgba(255,255,255,.65);
  pointer-events:none;z-index:5;
}
.curtain{
  position:fixed;inset:0;z-index:80;background:#fff;opacity:0;pointer-events:none;
}

.caption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:0 var(--gut) clamp(22px,3.4vw,40px);
  color:rgba(244,243,239,.76);
}
.caption__say{max-width:38ch;font-size:clamp(13px,1.25vw,16px);line-height:1.45;color:inherit}
.caption__say b{color:#F4F3EF;font-weight:500}
.prompt{display:flex;align-items:center;gap:9px;flex-shrink:0;color:#F4F3EF}
.prompt b{width:6px;height:6px;background:var(--yellow);animation:pulse 1.5s var(--ease) infinite}

/* ============================================================
   CHROME
   ============================================================ */
.chrome{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;
  transition:opacity .7s var(--ease) .25s,color .45s linear;
  font-family:var(--mono);font-size:clamp(8px,.78vw,10px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);
}
.entered .chrome{opacity:1}
.chrome::before,.chrome::after{content:"";position:absolute;left:0;right:0;pointer-events:none;transition:opacity .45s linear}
.chrome::before{top:0;height:clamp(54px,7vh,82px);
  background:linear-gradient(to bottom,var(--black) 8%,rgba(11,11,10,0))}
.chrome::after{bottom:0;height:clamp(48px,6vh,74px);
  background:linear-gradient(to top,var(--black) 10%,rgba(11,11,10,0))}
.chrome__row{position:absolute;left:var(--gut);right:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.chrome__row--t{top:clamp(16px,2.2vw,26px)}
.chrome__row--b{bottom:clamp(16px,2.2vw,26px)}
.chrome__mark{
  font-family:var(--display);font-weight:800;font-size:clamp(14px,1.4vw,18px);
  letter-spacing:-.02em;color:var(--white);pointer-events:auto;
  transition:color .45s linear;
}
.chrome__links{display:flex;gap:clamp(6px,.7vw,10px);pointer-events:auto}


/* ============================================================
   THE WORLD
   everything after the panel breaks lives in one fixed stage.
   the scroll is a camera, not a page. scenes hand off by
   inheriting an object, never by fading to nothing.
   ============================================================ */
body.entered{background:#0B0A0A}

.gd{position:fixed;inset:0;z-index:0;pointer-events:none;background:#0B0A0A}
/* the light we came out of. it closes to a point as the camera travels,
   and opens again when the world needs to breathe. a wipe, never a fade. */
.gd__paper{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(132% 104% at 50% 12%,#EFE8E0,#E3DAD0 54%,#CFC4B7);
  clip-path:circle(var(--r,0%) at 50% 50%);will-change:clip-path}
.gd__vig{position:fixed;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 clamp(140px,22vw,420px) rgba(0,0,0,.42)}
.on-paper .gd__vig{box-shadow:inset 0 0 clamp(170px,22vw,440px) rgba(58,46,38,.30)}

/* ============================================================
   THE FIELD
   the ground is never plain. a grid and the scanlines of the tube
   sit over both states, so black and cream read as one room.
   ============================================================ */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;overflow:hidden}
.entered .field{opacity:1;transition:opacity 1.1s var(--ease)}
.surfacing.entered .field{transition-delay:.5s}
.field__grid{position:absolute;inset:-8px;will-change:transform;
  background-image:
    linear-gradient(to right,rgba(231,222,213,.1) 0 1px,transparent 1px),
    linear-gradient(to bottom,rgba(231,222,213,.1) 0 1px,transparent 1px);
  background-size:clamp(60px,6.2vw,108px) clamp(60px,6.2vw,108px);
  -webkit-mask-image:radial-gradient(ellipse 82% 82% at 50% 46%,#000 32%,rgba(0,0,0,.25) 96%);
  mask-image:radial-gradient(ellipse 82% 82% at 50% 46%,#000 32%,rgba(0,0,0,.25) 96%)}
.on-paper .field__grid{background-image:
    linear-gradient(to right,rgba(24,24,24,.13) 0 1px,transparent 1px),
    linear-gradient(to bottom,rgba(24,24,24,.13) 0 1px,transparent 1px)}
/* never transformed, so it is painted once and then only composited */
.field__fx{position:absolute;inset:0;
  background-image:
    radial-gradient(ellipse 58% 52% at 50% 46%,rgba(240,86,42,.11),rgba(240,86,42,0) 64%),
    repeating-linear-gradient(to bottom,rgba(0,0,0,.15) 0 1px,rgba(0,0,0,0) 1px 3px);
  background-size:100% 100%,100% 3px;
  background-repeat:no-repeat,repeat}
.on-paper .field__fx{background-image:
    radial-gradient(ellipse 58% 52% at 50% 46%,rgba(240,86,42,.05),rgba(240,86,42,0) 64%),
    repeating-linear-gradient(to bottom,rgba(24,24,24,.055) 0 1px,rgba(0,0,0,0) 1px 3px)}
/* the sync bar of a tube that never quite locks */
.roll{position:fixed;left:-3%;right:-3%;top:0;height:26vh;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,rgba(231,222,213,0),rgba(231,222,213,.05) 46%,rgba(231,222,213,0));
  animation:tvroll 9s linear infinite;will-change:transform}
.entered .roll{opacity:1;transition:opacity 1.1s var(--ease)}
.on-paper .roll{background:linear-gradient(to bottom,rgba(24,24,24,0),rgba(24,24,24,.04) 46%,rgba(24,24,24,0))}
@keyframes tvroll{from{transform:translate3d(0,-28vh,0)}to{transform:translate3d(0,104vh,0)}}

/* ============================================================
   BEYOND THE SCREEN
   the same dimension, seen through the glass while the camera is
   still outside the set. it is discovered, never switched on.
   ============================================================ */
.deep{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  perspective:1100px;perspective-origin:50% 50%;opacity:0;
  mix-blend-mode:screen;will-change:opacity}
.deep__in{position:absolute;inset:0;transform-style:preserve-3d}
.deep__p{position:absolute;left:50%;top:50%;width:150vw;height:150vw;margin:0;
  transform-origin:50% 50%;will-change:transform;
  background-image:
    linear-gradient(to right,rgba(240,86,42,.62) 0 2px,transparent 2px),
    linear-gradient(to bottom,rgba(231,222,213,.46) 0 2px,transparent 2px);
  background-size:9.3vw 9.3vw;
  -webkit-mask-image:radial-gradient(ellipse 60% 54% at 50% 50%,#000 6%,transparent 74%);
  mask-image:radial-gradient(ellipse 60% 54% at 50% 50%,#000 6%,transparent 74%)}
.deep__far{position:absolute;left:50%;top:50%;width:130vw;height:110vh;margin:0;
  transform-origin:50% 50%;will-change:transform;
  background-image:
    linear-gradient(to right,rgba(231,222,213,.24) 0 1px,transparent 1px),
    linear-gradient(to bottom,rgba(231,222,213,.24) 0 1px,transparent 1px);
  background-size:2.1vw 2.1vw;
  -webkit-mask-image:radial-gradient(ellipse 56% 60% at 50% 50%,#000 0,rgba(0,0,0,.5) 36%,transparent 78%);
  mask-image:radial-gradient(ellipse 56% 60% at 50% 50%,#000 0,rgba(0,0,0,.5) 36%,transparent 78%)}
.deep__h{position:absolute;left:8%;right:8%;top:50%;height:1px;
  background:linear-gradient(to right,rgba(240,86,42,0),rgba(240,86,42,.5),rgba(240,86,42,0))}

/* ============================================================
   THE DIMENSION
   three depth layers so the space has real parallax. the far plane
   barely moves, the floor and ceiling move at the speed of the
   camera, and the near lines rush past the lens.
   ============================================================ */
.room3d{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  perspective:1100px;perspective-origin:50% 50%;opacity:0;visibility:hidden}
.entered .room3d{opacity:1;visibility:visible;transition:opacity 1s var(--ease)}
/* the dimension resolves in stages: the grid and the objects it carries
   arrive first, out of the white; everything else follows behind them */
.surfacing.entered .room3d{transition-delay:0s}
.dim{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.dim__far{position:absolute;left:50%;top:50%;width:130vw;height:110vh;margin:0;
  transform-origin:50% 50%;will-change:transform;
  background-image:
    linear-gradient(to right,rgba(231,222,213,.16) 0 1px,transparent 1px),
    linear-gradient(to bottom,rgba(231,222,213,.16) 0 1px,transparent 1px),
    linear-gradient(to right,rgba(240,86,42,.2) 0 1px,transparent 1px);
  background-size:1.15vw 1.15vw,1.15vw 1.15vw,5.75vw 5.75vw;
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 0,rgba(0,0,0,.5) 36%,transparent 78%);
  mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 0,rgba(0,0,0,.5) 36%,transparent 78%)}
.on-paper .dim__far{background-image:
    linear-gradient(to right,rgba(24,24,24,.2) 0 1px,transparent 1px),
    linear-gradient(to bottom,rgba(24,24,24,.2) 0 1px,transparent 1px),
    linear-gradient(to right,rgba(240,86,42,.22) 0 1px,transparent 1px)}
.dim__near{position:absolute;inset:0;transform-style:preserve-3d}
.dim__near i{position:absolute;left:50%;top:50%;margin:0;
  background:rgba(231,222,213,.42)}
.dim__near i.f{background:var(--flare);opacity:.5}
.on-paper .dim__near i{background:rgba(24,24,24,.34)}
.dim__p{position:absolute;left:50%;top:50%;width:120vw;height:120vw;margin:0;
  transform-origin:50% 50%;will-change:transform;
  background-image:
    linear-gradient(to right,rgba(240,86,42,.26) 0 2px,transparent 2px),
    linear-gradient(to bottom,rgba(231,222,213,.16) 0 2px,transparent 2px);
  background-size:9.3vw 9.3vw;
  -webkit-mask-image:radial-gradient(ellipse 60% 54% at 50% 50%,#000 6%,transparent 74%);
  mask-image:radial-gradient(ellipse 60% 54% at 50% 50%,#000 6%,transparent 74%)}
.on-paper .dim__p{background-image:
    linear-gradient(to right,rgba(240,86,42,.3) 0 2px,transparent 2px),
    linear-gradient(to bottom,rgba(24,24,24,.16) 0 2px,transparent 2px)}
/* small objects adrift in the room. they belong to the space, not to a
   section, so they carry through every scene at their own speeds. */
.ob{position:absolute;left:50%;top:50%;margin:0;pointer-events:none;
  transition:color .55s linear}
/* the room is scattered with loose archive characters, not props: a stray
   digit, a greek letter, a math mark, a stroke of foreign type — single
   glyphs adrift like a decrypt feed, always in a true monospace, the one
   thing nothing else on the page uses */
.ob--gl{font-family:'Courier Prime',ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-weight:700;line-height:1;color:rgba(231,222,213,.72);user-select:none}
.ob.hot{color:var(--flare);text-shadow:0 0 14px rgba(240,86,42,.6)}
.on-paper .ob--gl{color:rgba(24,24,24,.62)}
.on-paper .ob.hot{color:var(--flare);text-shadow:none}
/* the fine dust layer: same glyph material, just smaller and dimmer, further
   back in the room — never a plain dot */
.ob--dust{font-weight:400;color:rgba(231,222,213,.5)}
.ob--dust.hot{text-shadow:0 0 7px rgba(240,86,42,.7)}
.on-paper .ob--dust{color:rgba(24,24,24,.4)}

.world{position:fixed;inset:0;z-index:1;overflow:hidden;
  perspective:1100px;perspective-origin:50% 50%;
  opacity:0;visibility:hidden}
.entered .world{opacity:1;visibility:visible;transition:opacity .8s var(--ease)}
.surfacing.entered .world{transition-delay:.32s}
.world__in{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.track{position:relative;z-index:0;pointer-events:none;height:1391svh}

.sc{position:absolute;inset:0;transform-style:preserve-3d;visibility:hidden}
.sc.sc--on{visibility:visible}
.mid{position:absolute;left:50%;top:50%;
  width:min(1360px,calc(100% - var(--gut) * 2));text-align:center;
  transform:translate(-50%,-50%);will-change:transform,opacity}

/* ---- the type of this world ---- */
.dspl{font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.92;letter-spacing:-.014em;color:#E7DED5;
  transition:color .55s linear}
.dspl em{font-style:normal;color:var(--flare)}
.mono{font:500 clamp(9px,.8vw,11px)/1.7 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:rgba(231,222,213,.68);transition:color .55s linear}
.copy{font:400 clamp(13.5px,1.08vw,16px)/1.64 var(--sans);color:rgba(231,222,213,.86);
  transition:color .55s linear}
.on-paper .dspl{color:#161514}
.on-paper .mono{color:rgba(24,24,24,.66)}
.on-paper .copy{color:rgba(24,24,24,.84)}

/* ---- the signal. one line, doing every job ---- */
.sig{position:fixed;z-index:40;pointer-events:none;
  left:0;top:50%;width:100%;height:2px;margin-top:-1px;transform-origin:left center;
  background:linear-gradient(to right,rgba(240,86,42,0),var(--flare) 10%,var(--flare) 90%,rgba(240,86,42,0));
  opacity:0;will-change:transform,opacity}
.sigdot{position:fixed;z-index:41;left:50%;top:50%;width:10px;height:10px;border-radius:50%;
  background:var(--flare);box-shadow:0 0 30px 5px rgba(240,86,42,.55);
  margin:-5px 0 0 -5px;transform:scale(0);opacity:0;pointer-events:none;
  will-change:transform,opacity}

/* ---- ENTER : the corridor ---- */
.ring{position:absolute;left:50%;top:50%;width:52vw;height:33vw;margin:-16.5vw 0 0 -26vw;
  border:1px solid rgba(231,222,213,.34);
  transition:border-color .55s linear;
  background:radial-gradient(ellipse at 50% 50%,rgba(240,86,42,.05),rgba(240,86,42,0) 68%);
  box-shadow:inset 0 0 70px rgba(240,86,42,.09),0 0 50px rgba(240,86,42,.07)}
.on-paper .ring{border-color:rgba(24,24,24,.34);
  box-shadow:inset 0 0 70px rgba(240,86,42,.1),0 0 50px rgba(240,86,42,.05)}
.ring::after{content:"";position:absolute;right:-2px;top:16%;bottom:16%;width:3px;
  background:var(--flare);opacity:.85;box-shadow:0 0 16px rgba(240,86,42,.7)}
.ring::before{content:"";position:absolute;left:-2px;top:34%;bottom:34%;width:2px;
  background:rgba(231,222,213,.45)}

/* ---- the travelling sentence. one line at a time, flown through the
   lens. carries the opening movement of WHAT WE DO ---- */
.stream{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.stream__l{position:absolute;left:50%;top:50%;white-space:nowrap;margin:0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.018em;line-height:.94;color:#E7DED5;
  font-size:clamp(1.4rem,4.8vw,4.6rem);will-change:transform,opacity,filter}
.stream__l em{font-style:normal;color:var(--flare)}
.on-paper .stream__l{color:#161514}
@media (max-width:760px){ .stream__l{font-size:clamp(1rem,5.2vw,2.1rem)} }

/* ---- BRICSMARK ---- */
.mark{font-family:var(--sans);font-weight:800;text-transform:uppercase;color:#E7DED5;
  font-size:clamp(2rem,11vw,10rem);line-height:.88;letter-spacing:-.035em;margin:0;
  transition:color .55s linear}
.on-paper .mark{color:#181818}
.stmt{font-size:clamp(1.8rem,6vw,5.6rem)!important;line-height:.98!important;
  letter-spacing:-.016em!important}
.mark em{font-style:normal;color:var(--flare)}
.ltr{display:inline-block;overflow:hidden;vertical-align:bottom}
.ltr>span{display:block;will-change:transform}

/* ---- 04 WHAT WE DO : three cards cut from the same paper stock as the
   print moments elsewhere. a card is a real object — number, rule, a
   plate, the name of the thing, what it is, what is in it ---- */
.srv{position:absolute;left:50%;top:50%;width:min(540px,86vw);
  transform:translate(-50%,-50%);text-align:left;
  padding:clamp(20px,2.3vw,32px);
  background:linear-gradient(166deg,#F5F0E9,#E8DFD5 58%,#D8CEC2);
  border:1px solid rgba(24,24,24,.16);
  box-shadow:0 52px 120px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.75);
  will-change:transform,opacity}
.srv__e{position:absolute;left:0;right:0;top:0;height:2px;background:var(--flare)}
.srv__h{display:flex;align-items:center;gap:clamp(10px,1.1vw,15px);margin-bottom:clamp(14px,1.6vw,20px)}
.srv__n{margin:0;font:600 clamp(9px,.76vw,11px)/1 var(--sans);letter-spacing:.3em;
  color:rgba(24,24,24,.5);flex:0 0 auto}
.srv__r{flex:1;height:1px;background:rgba(24,24,24,.2)}
/* the plate: a drawn stand-in for the work, not a claim about it */
.srv__m{position:relative;height:clamp(96px,11vw,150px);overflow:hidden;background:#D5CABE;
  border:1px solid rgba(24,24,24,.14);margin-bottom:clamp(15px,1.7vw,22px)}
.srv__m>i{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(24,24,24,.05) 0 1px,transparent 1px 16px),
             repeating-linear-gradient(to right,rgba(24,24,24,.04) 0 1px,transparent 1px 16px)}
.srv__m>s{position:absolute;inset:0;text-decoration:none;
  background:linear-gradient(128deg,rgba(0,0,0,0) 78%,var(--flare) 78.5%)}
.srv__m b{position:absolute;left:clamp(9px,1vw,13px);bottom:clamp(7px,.8vw,11px);
  font:500 clamp(7.5px,.66vw,9.5px)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(24,24,24,.46)}
/* the service plates draw the method each card describes. a generic texture
   block here said nothing; these say what the card says, in one look. */
/* the drawing keeps clear of the caption strip at the foot of the plate */
.srv__d{position:absolute;inset:6px;width:auto;height:auto;display:block}
.srv__d .ln{fill:none;stroke:rgba(24,24,24,.46);stroke-width:1.1;vector-effect:non-scaling-stroke}
.srv__d .gd{fill:none;stroke:rgba(24,24,24,.26);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.srv__d .fl{fill:rgba(24,24,24,.3)}
.srv__d .fl2{fill:rgba(24,24,24,.46)}
.srv__d .hot{fill:var(--flare)}
.srv__d .hotl{fill:none;stroke:var(--flare);stroke-width:1.3;vector-effect:non-scaling-stroke}
/* the signature diagonal was cut for an empty plate; pulled back into the
   corner so it marks the card without crossing the drawing */
.srv__m>s{background:linear-gradient(128deg,rgba(0,0,0,0) 89%,var(--flare) 89.5%)}
.srv h3{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.94;letter-spacing:-.016em;font-size:clamp(1.6rem,3.4vw,2.9rem);color:#141312}
.srv h3 b{font-weight:inherit;color:var(--flare)}
.srv p{margin:clamp(10px,1.2vw,16px) 0 0;max-width:none;
  font:400 clamp(12.5px,.96vw,14.5px)/1.56 var(--sans);color:rgba(24,24,24,.76)}
.srv__l{list-style:none;margin:clamp(14px,1.6vw,20px) 0 0;padding:0;display:grid}
.srv__l li{position:relative;padding:clamp(7px,.8vw,10px) 0 clamp(7px,.8vw,10px) 20px;
  font:400 clamp(11.5px,.9vw,13.5px)/1.45 var(--sans);color:rgba(24,24,24,.72);
  border-top:1px solid rgba(24,24,24,.13)}
.srv__l li::before{content:"";position:absolute;left:0;top:calc(clamp(7px,.8vw,10px) + .6em);
  width:8px;height:1px;background:var(--flare)}
.srv__tags{margin:clamp(14px,1.6vw,20px) 0 0;display:flex;flex-wrap:wrap;gap:5px clamp(10px,1.1vw,16px);
  padding-top:clamp(11px,1.2vw,16px);border-top:1px solid rgba(24,24,24,.16)}
.srv__tags span{font:500 clamp(7.5px,.68vw,9.5px)/1.4 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(24,24,24,.56)}

/* ---- 05 BUILD / 06 BREAK ------------------------------------------
   one interface, assembled then fractured. every part is a sibling
   rather than a child, so the same objects that draw themselves in
   can each be thrown on their own vector when the thing comes apart.
   -------------------------------------------------------------------- */
.ui{position:absolute;left:50%;top:50%;width:min(1000px,88vw);aspect-ratio:16/10;
  transform:translate(-50%,-50%);transform-style:preserve-3d;pointer-events:none}
.uip{position:absolute;will-change:transform,opacity,clip-path;
  background:rgba(26,22,20,.55);border:1px solid rgba(240,86,42,.38);
  box-shadow:0 0 22px rgba(240,86,42,.07)}
.on-paper .uip{background:rgba(255,255,255,.4);border-color:rgba(24,24,24,.26);box-shadow:none}
/* window chrome: three dots and an address plate */
.uip--bar{display:flex;align-items:center;gap:5px;padding:0 9px;background:rgba(240,86,42,.09)}
.uip--bar i{width:5px;height:5px;border-radius:50%;background:rgba(231,222,213,.38);flex:0 0 auto}
.uip--bar u{flex:1;height:38%;margin-left:9px;text-decoration:none;background:rgba(231,222,213,.13)}
.on-paper .uip--bar u{background:rgba(24,24,24,.1)}
.on-paper .uip--bar i{background:rgba(24,24,24,.24)}
/* nav: a mark and four items */
.uip--nav{display:flex;align-items:center;gap:clamp(8px,1vw,14px);padding:0 10px;background:none;
  border-color:transparent;border-bottom-color:rgba(240,86,42,.24)}
.on-paper .uip--nav{border-bottom-color:rgba(24,24,24,.18)}
.uip--nav b{width:clamp(26px,3.4%,42px);height:40%;background:var(--flare);flex:0 0 auto}
.uip--nav span{height:26%;background:rgba(231,222,213,.28);flex:0 0 auto}
.uip--nav span:nth-child(2){width:11%}.uip--nav span:nth-child(3){width:8%}
.uip--nav span:nth-child(4){width:9.5%}.uip--nav span:nth-child(5){width:7%}
.on-paper .uip--nav span{background:rgba(24,24,24,.24)}
/* a headline is a solid bar: type at a distance, not lorem ipsum */
.uip--type{background:rgba(231,222,213,.5);border-color:transparent}
.on-paper .uip--type{background:rgba(24,24,24,.46)}
.uip--type.is-flare{background:var(--flare)}
/* the plate, same drawn stand-in the cards use */
.uip--plate{overflow:hidden;background:rgba(213,202,190,.16)}
.uip--plate>i{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(231,222,213,.07) 0 1px,transparent 1px 14px)}
.uip--plate>s{position:absolute;inset:0;text-decoration:none;
  background:linear-gradient(128deg,rgba(0,0,0,0) 76%,rgba(240,86,42,.85) 76.5%)}
.on-paper .uip--plate{background:rgba(24,24,24,.07)}
.on-paper .uip--plate>i{background:repeating-linear-gradient(to bottom,rgba(24,24,24,.07) 0 1px,transparent 1px 14px)}
/* a paragraph is three short rules */
.uip--body{background:none;border-color:rgba(240,86,42,.2);padding:6px;display:grid;
  align-content:start;gap:22%}
.uip--body>i{height:2px;background:rgba(231,222,213,.3)}
.uip--body>i:nth-child(1){width:100%}.uip--body>i:nth-child(2){width:86%}
.uip--body>i:nth-child(3){width:62%}
.on-paper .uip--body>i{background:rgba(24,24,24,.26)}
.on-paper .uip--body{border-color:rgba(24,24,24,.18)}
/* the button is the only filled thing on the page */
.uip--cta{background:var(--flare);border-color:var(--flare)}
.uip--cta u{position:absolute;left:14%;right:14%;top:44%;height:2px;text-decoration:none;
  background:rgba(12,10,9,.62)}
/* guides: the drawing that the page is set out on */
.uig{position:absolute;pointer-events:none;will-change:opacity,transform}
.uig--v{top:-5%;bottom:-5%;width:1px;background:rgba(240,86,42,.24)}
.on-paper .uig--v{background:rgba(24,24,24,.16)}
.uig--c{width:13px;height:13px;border-left:1px solid var(--flare);border-top:1px solid var(--flare)}
.uig--c.r{transform:scaleX(-1)}.uig--c.b{transform:scaleY(-1)}
.uig--c.rb{transform:scale(-1,-1)}
.uig--d{font:500 8.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(240,86,42,.7);white-space:nowrap}

/* ---- 07 MOVE : the fragments come back as footage. a frame here is
   a working one — it has a head, a timecode, a scrubber ---- */
.mf{position:absolute;left:50%;top:50%;width:clamp(230px,32vw,480px);
  background:#16140F;border:1px solid rgba(231,222,213,.32);
  will-change:transform,opacity;overflow:hidden}
.on-paper .mf{background:#EFE9E1;border-color:rgba(24,24,24,.26)}
.mf__s{position:relative;display:block;width:100%;overflow:hidden;
  background:#201D18}
/* every decoration is a direct child: a descendant selector here would
   also catch the bars inside the waveform and rip them out of flow */
.mf__s>.mf__grid{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(231,222,213,.06) 0 1px,transparent 1px 13px)}
.mf__s>.mf__slash{position:absolute;inset:0;
  background:linear-gradient(128deg,rgba(0,0,0,0) 88%,rgba(240,86,42,.8) 88.5%)}
.on-paper .mf__s{background:#D8CEC2}
/* the play head, drawn as a triangle out of borders */
.mf__play{position:absolute;left:50%;top:50%;width:0;height:0;margin:-11px 0 0 -7px;
  border-left:19px solid rgba(231,222,213,.86);
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.on-paper .mf__play{border-left-color:rgba(24,24,24,.72)}
/* the frames are editor comps: viewer above, layer stack and timeline below.
   the layer counts are the claims the captions make. */
.mf__dg{position:absolute;inset:6%;width:88%;height:88%;display:block}
.mf__dg .ln{fill:none;stroke:rgba(231,222,213,.46);stroke-width:1;vector-effect:non-scaling-stroke}
.mf__dg .gd{fill:none;stroke:rgba(231,222,213,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.mf__dg .fl{fill:rgba(231,222,213,.26)}
.mf__dg .fl2{fill:rgba(231,222,213,.44)}
.mf__dg .hot,.mf__dg .hotf{fill:var(--flare)}
.mf__dg .kf{fill:rgba(231,222,213,.9)}
/* everything the playhead has passed reads as rendered */
.mf__dg .pl{fill:rgba(240,86,42,.13)}
.mf__dg .ph path{fill:none;stroke:var(--flare);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mf__dg .ph .phh{fill:var(--flare);stroke:none}
.on-paper .mf__dg .ln{stroke:rgba(24,24,24,.46)}
.on-paper .mf__dg .gd{stroke:rgba(24,24,24,.2)}
.on-paper .mf__dg .fl{fill:rgba(24,24,24,.26)}
.on-paper .mf__dg .fl2{fill:rgba(24,24,24,.44)}
.on-paper .mf__dg .kf{fill:rgba(24,24,24,.8)}
.mf__rec{position:absolute;left:9px;top:8px;font:500 8px/1 var(--sans);letter-spacing:.2em;
  color:var(--flare);display:flex;align-items:center;gap:5px}
.mf__dot{width:5px;height:5px;border-radius:50%;background:var(--flare)}
.mf__t{display:flex;align-items:center;gap:9px;padding:7px 9px}
/* what the deliverable actually is, under its format label */
.mf__d{margin:0;padding:0 9px 9px;font:400 clamp(9px,.72vw,11px)/1.45 var(--sans);
  color:rgba(231,222,213,.5)}
.on-paper .mf__d{color:rgba(24,24,24,.58)}
.mf__tc{font:500 8.5px/1 var(--sans);letter-spacing:.14em;color:rgba(231,222,213,.72);
  flex:0 0 auto;font-variant-numeric:tabular-nums}
.on-paper .mf__tc{color:rgba(24,24,24,.66)}
.mf__b{flex:1;height:2px;background:rgba(231,222,213,.2);position:relative;display:block}
.mf__b>span{position:absolute;left:0;top:0;bottom:0;background:var(--flare);display:block}
.on-paper .mf__b{background:rgba(24,24,24,.16)}
/* the sound version: a strip of bars instead of a plate */
/* the film version: perforations down both edges */
.mf--perf .mf__s{border-left:13px solid rgba(231,222,213,.09);
  border-right:13px solid rgba(231,222,213,.09)}
.mf--perf .mf__s::before,.mf--perf .mf__s::after{content:"";position:absolute;top:0;bottom:0;
  width:9px;background:repeating-linear-gradient(to bottom,rgba(231,222,213,.34) 0 7px,transparent 7px 18px)}
.mf--perf .mf__s::before{left:-11px}
.mf--perf .mf__s::after{right:-11px}

/* ---- 08 SELECTED CLIENTS : the logos arrive out of the depth and
   settle onto the signal, which runs under them like a rail. a row of
   flat logos pasted across a page is the one thing on this site that
   would look bought rather than made, so they travel in like everything
   else does. ---- */
/* two tiers: the businesses, then the individual agents, set smaller.
   one undifferentiated block of twenty names reads as a list; two
   weights read as a roster. the signal runs under the whole thing */
.cliw{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);
  width:min(1120px,90vw);display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,2.4vw,30px);transform-style:preserve-3d;pointer-events:none}
.cli{width:100%;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:clamp(11px,1.7vw,22px) clamp(18px,3vw,44px);
  transform-style:preserve-3d}
.lg{display:flex;align-items:center;justify-content:center;
  opacity:0;will-change:transform,opacity}
.lg__p{display:flex;align-items:center;justify-content:center;
  height:clamp(24px,3.2vw,44px);color:rgba(231,222,213,.86);
  transition:color .55s linear}
.on-paper .lg__p{color:rgba(24,24,24,.8)}
/* the logos are traced outlines drawn with currentColor, so they take the
   theme exactly rather than being filtered towards it, and stay sharp at any
   size. --k is each mark's optical scale: setting a row of logos to one
   uniform height lets a long wordmark dominate and buries a square badge,
   so each is sized by how much ink it actually carries. */
.cli{--lgh:clamp(29px,3.9vw,54px)}
.lg--l .lg__p{height:auto}
.lg--l svg{display:block;width:auto;height:calc(var(--lgh) * var(--k,1))}
/* a raster logo, if one is ever supplied instead of a traced one, still gets
   knocked back to a single tone */
.lg__p img{max-height:100%;max-width:100%;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);opacity:.8}
.on-paper .lg__p img{filter:grayscale(1) brightness(0);opacity:.72}
/* until a logo file lands, the name stands in for the mark. set in the sans at
   a logo's optical weight, not as display type: the same names in the serif at
   display size swallowed the real logos sitting next to them, which made the
   placeholders look like the important entries. */
.lg__p b{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:clamp(.6rem,.92vw,.86rem);line-height:1;letter-spacing:.11em;
  color:rgba(231,222,213,.72);white-space:nowrap}
.on-paper .lg__p b{color:rgba(24,24,24,.7)}
/* tier two — clients who trade under their own name. they sit apart because a
   person has a handle where a company has a logo, not because they rank lower,
   so the name is set at the same weight the placeholder names carry above. */
.cli--ag{gap:clamp(10px,1.5vw,18px) clamp(18px,2.8vw,40px)}
.cli--ag .lg__p{height:auto;flex-direction:column;gap:4px;text-align:center}
.cli--ag .lg__p b{font-family:var(--mono);font-weight:600;text-transform:none;
  font-size:clamp(.68rem,1.08vw,.94rem);letter-spacing:.012em;
  color:rgba(231,222,213,.72)}
.on-paper .cli--ag .lg__p b{color:rgba(24,24,24,.74)}
/* the handle is where the work actually lives for these clients, so it is set
   in the signal colour rather than greyed out as a footnote */
.cli--ag .lg__p i{font-family:var(--mono);font-style:normal;font-weight:500;
  font-size:clamp(.55rem,.84vw,.72rem);letter-spacing:.05em;
  color:rgba(240,86,42,.82);white-space:nowrap}
.on-paper .cli--ag .lg__p i{color:rgba(190,63,23,.9)}
/* a short centred hairline between the tiers. it carried a label naming the
   second group, which read as ranking them below the first — the rule alone
   separates the two kinds of entry without saying anything about either. */
.clid{width:100%;display:flex;align-items:center;justify-content:center;
  opacity:0;will-change:opacity}
.clid i{flex:0 0 min(220px,34%);height:1px;background:rgba(231,222,213,.16)}
.on-paper .clid i{background:rgba(24,24,24,.14)}

/* ---- 09 THE WORK : a gallery you travel through rather than a grid
   you scan. every frame is driven from the WORK array in the script,
   so real footage drops in without touching this scene ---- */
.gal{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.gw{position:absolute;left:50%;top:50%;width:clamp(270px,40vw,660px);
  will-change:transform,opacity}
.gw__f{position:relative;width:100%;overflow:hidden;background:#1C1A17;
  border:1px solid rgba(231,222,213,.34)}
.gw__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gw__f>i{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(231,222,213,.055) 0 1px,transparent 1px 15px),
             repeating-linear-gradient(to right,rgba(231,222,213,.04) 0 1px,transparent 1px 15px)}
.gw__f>s{position:absolute;inset:0;text-decoration:none;
  background:linear-gradient(128deg,rgba(0,0,0,0) 77%,rgba(240,86,42,.75) 77.5%)}
.on-paper .gw__f{background:#DCD2C6;border-color:rgba(24,24,24,.26)}
.on-paper .gw__f>i{background:repeating-linear-gradient(to bottom,rgba(24,24,24,.06) 0 1px,transparent 1px 15px),
             repeating-linear-gradient(to right,rgba(24,24,24,.05) 0 1px,transparent 1px 15px)}
/* the stage drawings, in the same hand as the service cards */
.gw__d{position:absolute;inset:7%;width:86%;height:86%;display:block}
.gw__d .ln{fill:none;stroke:rgba(231,222,213,.5);stroke-width:1.1;vector-effect:non-scaling-stroke}
.gw__d .gd{fill:none;stroke:rgba(231,222,213,.26);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.gw__d .fl{fill:rgba(231,222,213,.3)}
.gw__d .fl2{fill:rgba(231,222,213,.46)}
.gw__d .hot,.gw__d .hotf{fill:var(--flare)}
.gw__d .hotl{fill:none;stroke:var(--flare);stroke-width:1.3;vector-effect:non-scaling-stroke}
.on-paper .gw__d .ln{stroke:rgba(24,24,24,.5)}
.on-paper .gw__d .gd{stroke:rgba(24,24,24,.26)}
.on-paper .gw__d .fl{fill:rgba(24,24,24,.3)}
.on-paper .gw__d .fl2{fill:rgba(24,24,24,.46)}
/* the stage note, under the name */
.gw__p{margin:7px 0 0;max-width:46ch;
  font:400 clamp(11px,.86vw,13px)/1.5 var(--sans);color:rgba(231,222,213,.6)}
.on-paper .gw__p{color:rgba(24,24,24,.64)}
.gw__c{display:flex;align-items:baseline;gap:12px;margin-top:11px}
.gw__n{font:600 clamp(8px,.7vw,10px)/1 var(--sans);letter-spacing:.28em;color:var(--flare);
  flex:0 0 auto}
.gw__t{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(.95rem,1.7vw,1.5rem);line-height:1;letter-spacing:-.012em;color:#E7DED5}
.gw__k{margin:0 0 0 auto;font:500 clamp(7.5px,.66vw,9.5px)/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(231,222,213,.5);flex:0 0 auto}
.on-paper .gw__t{color:#161514}
.on-paper .gw__k{color:rgba(24,24,24,.52)}

/* ---- 12 FINAL COLLAPSE : everything the site has been made of, pulled
   back into the one point it came out of ---- */
.dot{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:var(--flare);opacity:0;will-change:transform,opacity}
.dot.w{background:rgba(231,222,213,.86)}

/* ---- the running caption ---- */
.cap{position:fixed;left:var(--gut);bottom:clamp(16px,2.2vw,26px);z-index:45;
  display:flex;align-items:baseline;gap:12px;pointer-events:none;opacity:0;
  font:400 clamp(8px,.74vw,10px)/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:rgba(231,222,213,.62);transition:opacity .5s linear,color .55s linear}
.entered .cap{opacity:1}
.cap b{color:var(--flare);font-weight:600}
.on-paper .cap{color:rgba(24,24,24,.62)}

/* ---- the final screen. it opens out of the signal dot ---- */
.fin{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;
  padding:0 var(--gut);background:#070606;visibility:hidden;pointer-events:none;
  clip-path:circle(0% at 50% 50%);will-change:clip-path}
.fin.on{visibility:visible;pointer-events:auto}
/* the room's archive glyphs follow through into the close, so the last
   frame still breathes instead of going flat */
.fin__gl{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fin__gl span{position:absolute;font-family:'Courier Prime',monospace;font-weight:700;
  color:rgba(231,222,213,.55);opacity:0;transition:opacity 1.3s var(--ease) .35s}
.fin__gl span.hot{color:var(--flare)}
.fin.on .fin__gl span{opacity:1}
.on-paper .fin__gl span{color:rgba(24,24,24,.46)}
.on-paper .fin__gl span.hot{color:var(--flare)}
.fin__in{display:grid;gap:clamp(14px,2.1vw,30px);justify-items:center;will-change:transform}
/* one last signal, drawn in before anything else settles */
.fin__line{display:block;width:56px;height:1px;background:var(--flare);margin:0 0 2px;
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .8s var(--snap) .05s}
.fin.on .fin__line{transform:scaleX(1)}
.fin__in .mono,.fin__in .fin__m,.fin__in .fin__s,.fin__in .cta{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.fin.on .fin__in .mono{opacity:1;transform:translateY(0);transition-delay:.14s}
.fin.on .fin__in .fin__m{opacity:1;transform:translateY(0);transition-delay:.26s}
.fin.on .fin__in .fin__s{opacity:1;transform:translateY(0);transition-delay:.4s}
.fin.on .fin__in .cta{opacity:1;transform:translateY(0);transition-delay:.52s}
.fin.on .fin__in .cta--q{transition-delay:.62s}
.fin__m{margin:0;font-family:var(--sans);font-weight:800;text-transform:uppercase;color:#E7DED5;
  font-size:clamp(2.4rem,11vw,10rem);line-height:.88;letter-spacing:-.035em}
.fin__m i{font-style:normal;color:var(--flare)}
.fin__s{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;color:#E7DED5;
  font-size:clamp(1rem,2.3vw,2rem);line-height:1.12;letter-spacing:-.01em}
.cta{position:relative;margin-top:clamp(8px,1.4vw,18px);padding:0 0 12px;
  font:500 clamp(9px,.9vw,12px)/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:#E7DED5;display:inline-flex;align-items:center;gap:14px;pointer-events:auto;
  background:none;border:0;cursor:pointer}
.cta s{text-decoration:none;color:var(--flare);transition:transform .45s var(--snap)}
.cta::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--flare);
  transform:scaleX(var(--pull,.1));transform-origin:left;transition:transform .45s var(--snap)}
.cta:hover s{transform:translateX(9px)}
.cta--q{color:rgba(231,222,213,.55);letter-spacing:.24em;margin-top:0}
.cta--q::after{background:rgba(231,222,213,.3)}

/* ---- chrome, re-set for this world ---- */
.chrome{font-family:var(--sans);font-size:clamp(8.5px,.76vw,10.5px);letter-spacing:.24em;
  color:rgba(231,222,213,.68);transition:opacity .7s var(--ease) .2s,color .55s linear}
.chrome::before,.chrome::after{display:none}
.chrome__mark{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(13px,1.3vw,18px);text-transform:uppercase;color:#E7DED5;
  transition:color .55s linear}
.chrome__links{display:flex;align-items:center;gap:clamp(11px,1.5vw,24px);pointer-events:auto}
.chrome__links a,.chrome__links button{
  font:400 clamp(8px,.72vw,10px)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:inherit;background:none;border:0;padding:5px 0;cursor:pointer;position:relative;font-weight:500}
.chrome__links a::after,.chrome__links button::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--flare);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--snap)}
.chrome__links a:hover::after,.chrome__links button:hover::after{transform:scaleX(1);transform-origin:left}
.chrome__bar{position:relative;flex:1;max-width:190px;height:1px;background:rgba(231,222,213,.22);
  transition:background .55s linear}
.chrome__bar i{position:absolute;inset:0;background:var(--flare);transform:scaleX(0);transform-origin:left}
.on-paper .chrome{color:rgba(24,24,24,.68)}
.on-paper .chrome__mark{color:#181818}
.on-paper .chrome__bar{background:rgba(24,24,24,.22)}
.signing .cap{opacity:0;transition:opacity .4s linear}
/* the mobile menu toggle: two short strokes, nothing more. hidden on
   desktop, where the full link row already fits */
.chrome__toggle{display:none;width:26px;height:18px;padding:0;border:0;background:none;
  pointer-events:auto;cursor:pointer;position:relative;z-index:62}
.chrome__toggle i{position:absolute;left:0;right:0;height:1px;background:#E7DED5;
  transition:transform .35s var(--snap),opacity .35s var(--snap)}
.chrome__toggle i:first-child{top:5px}
.chrome__toggle i:last-child{bottom:5px}
.on-paper .chrome__toggle i{background:#181818}
.chrome__toggle[aria-expanded="true"] i:first-child{transform:translateY(6px) rotate(45deg)}
.chrome__toggle[aria-expanded="true"] i:last-child{transform:translateY(-6px) rotate(-45deg)}
.chrome__scrim{display:none}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:760px){
  .chrome__toggle{display:block}
  .chrome__links{position:fixed;top:0;right:0;bottom:0;width:min(72vw,300px);
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:22px;padding:0 clamp(28px,7vw,40px);margin:0;
    background:#0c0b0a;border-left:1px solid rgba(231,222,213,.14);
    transform:translateX(100%);transition:transform .45s var(--ease);z-index:61}
  .on-paper .chrome__links{background:#efe9e0;border-left-color:rgba(24,24,24,.14)}
  .chrome__links.open{transform:translateX(0)}
  .chrome__links a,.chrome__links button{font-size:14px;letter-spacing:.2em;padding:2px 0}
  .chrome__bar{display:none}
  .chrome__scrim{display:block;position:fixed;inset:0;z-index:60;background:rgba(5,5,4,.5);
    opacity:0;pointer-events:none;transition:opacity .4s linear}
  .chrome__scrim.open{opacity:1;pointer-events:auto}
  .track{height:1165svh}
  /* absolutely positioned from left:50% with no width, the hint can only
     shrink-to-fit into half the set — enough on a wide screen, not on a
     phone, where it broke onto a second line */
  .hint{white-space:nowrap}
  /* the rig is a wide object on a tall screen: give it the full width
     it can have, and pull the plates in so the layout still reads */
  .ui{width:94vw}
  .uig--d{font-size:7.5px;letter-spacing:.18em}
  .mf{width:clamp(210px,74vw,330px)}
  /* twenty names on a phone: tighten the gaps and let the wall use the
     height the scene has, rather than squeezing it around 49% */
  .cliw{top:50%;width:94vw;gap:13px}
  /* the logo height is tied to the type size here rather than left on its
     desktop ramp, or the marks tower over the names beside them */
  .cli{gap:11px 17px;--lgh:29px}
  .cli--ag{gap:7px 13px}
  .lg__p{height:19px}
  .lg__p b{font-size:clamp(.56rem,2.5vw,.74rem)}
  .cli--ag .lg__p b{font-size:clamp(.6rem,2.7vw,.78rem)}
  .clid{gap:8px}
  .ring{width:78vw;height:50vw;margin:-25vw 0 0 -39vw}
  .sig{height:1.5px;box-shadow:0 0 26px rgba(240,86,42,.55)}
  .mark,.fin__m{font-size:clamp(1.8rem,9.2vw,4rem);letter-spacing:-.028em}
  .fin__s{font-size:clamp(.95rem,4.4vw,1.5rem)}
  .cap{letter-spacing:.2em}
}

@media (prefers-reduced-motion:reduce){
  .world{position:relative;inset:auto;height:auto;overflow:visible;perspective:none;
    opacity:1;visibility:visible}
  .world__in{position:relative;inset:auto;transform:none!important}
  .sc{position:relative;inset:auto;visibility:visible;min-height:auto;
    display:grid;place-items:center;padding:clamp(54px,9vh,100px) var(--gut)}
  .mid,.srv,.ring,.fin__in,.gw{position:relative;left:auto;top:auto;right:auto;
    transform:none!important;opacity:1!important;margin:0 auto;width:auto;max-width:1100px}
  .ring,.sig,.sigdot,.track,.cap,.gd__vig,.room3d{display:none}
  /* the rig, the footage and the multiplying field are animations with
     nothing left to say once motion is off, so they step aside and the
     gallery stands in as an ordinary stack of frames */
  .ui,.amp,.mf{display:none}
  .gal{position:relative;inset:auto;display:grid;gap:clamp(26px,5vh,54px);
    width:100%;max-width:1100px;margin:0 auto}
  .gw__f{aspect-ratio:16/9!important}
  .cliw{position:relative;left:auto;top:auto;transform:none!important;
    width:100%;max-width:1100px;margin:0 auto}
  .lg{opacity:1!important;transform:none!important}
  .clid{opacity:1!important}
  .roll{display:none}
  .field{opacity:1}
  /* the panel cannot be played without motion, so it sits as a still header */
  .intro{position:relative;inset:auto;height:100svh;z-index:1}
  .srv{padding:clamp(24px,4vh,50px) 0;text-align:center}
  .stream{position:relative;inset:auto;overflow:visible;display:grid;gap:clamp(10px,1.6vh,18px);
    width:100%;max-width:1100px;margin:0 auto;justify-items:center;text-align:center}
  .stream__l{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important;
    filter:none!important;font-size:clamp(1.3rem,3.4vw,2.4rem);white-space:normal}
  .deep{display:none}
  .fin{position:relative;inset:auto;visibility:visible;pointer-events:auto;clip-path:none;
    padding:clamp(70px,12vh,140px) var(--gut)}
  .gd__paper{display:none}
}