/* Direction C: orbit. Strictly black and white, everything on one canvas.
   The photographs are desaturated at the compositor so the palette cannot drift. */

:root{
  --paper:#000;
  --ink:#f0eee7;
  --faint:rgba(240,238,231,.46);
}

html{background:var(--paper)}
body{background:var(--paper);color:var(--ink)}

.scroll-space{height:var(--scroll-len,340vh)}
.sky{position:fixed;inset:0;overflow:hidden}
#orbit{position:absolute;inset:0;width:100%;height:100%;display:block;
  filter:grayscale(1) contrast(1.04);cursor:default}
#orbit[data-hit=true]{cursor:pointer}

.masthead{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:20px var(--gutter);height:68px;
  background:linear-gradient(rgba(0,0,0,.92) 30%,rgba(0,0,0,.55) 70%,transparent)}
.wordmark{font-family:var(--sans);font-size:14px;letter-spacing:0;text-decoration:none;color:var(--faint);
  white-space:nowrap;transition:color .25s var(--ease)}
.wordmark:hover{color:var(--ink)}
.masthead nav{display:flex;gap:26px}
.masthead nav a{font-family:var(--sans);font-size:14px;letter-spacing:0;text-decoration:none;
  color:var(--faint);transition:color .25s var(--ease)}
.masthead nav a:hover{color:var(--ink)}

/* Where you are in the system, and the way back out. */
.trail{position:absolute;left:var(--gutter);bottom:26px;z-index:11;display:flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:13.5px}
.trail button{color:var(--faint);transition:color .2s var(--ease)}
.trail button:hover{color:var(--ink)}
.trail b{color:var(--ink);font-weight:400}
.trail i{color:rgba(255,255,255,.3);font-style:normal}

.count{position:absolute;right:var(--gutter);bottom:26px;z-index:11;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,238,231,.34)}

/* One standing instruction, faded out as soon as the visitor moves. */
.cue{position:absolute;left:var(--gutter);bottom:54px;z-index:11;
  font-family:var(--sans);font-size:13px;color:rgba(240,238,231,.3);transition:opacity .6s var(--ease)}
.cue[data-hidden=true]{opacity:0}

.tip{display:none}

/* Full frame, kept monochrome so the direction stays honest. */
.lightbox img{filter:grayscale(1) contrast(1.04)}
.lightbox-close,.lightbox-nav{border-color:rgba(240,238,231,.22)}
.lightbox-close:hover,.lightbox-nav:hover{border-color:var(--ink);color:var(--ink)}

/* Ground for the bottom bar once the gallery runs under it. */
.footbar{position:absolute;left:0;right:0;bottom:0;height:96px;z-index:10;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.62) 42%,rgba(0,0,0,.94))}

.fallback{position:absolute;left:-9999px}
.fallback:focus-within{position:static;padding:88px var(--gutter) 40px;z-index:50;background:var(--paper)}

@media (max-width:820px){
  .masthead{height:56px;padding:14px var(--gutter)}
  .masthead nav{gap:13px}
  .masthead nav a,.wordmark{font-size:12px}
  .trail{font-size:11.5px;bottom:18px}
  .count{font-size:9px;bottom:18px}
  .cue{bottom:42px;font-size:11px}
}