/* Document, the scroll track, and the picture that runs inside the box. */

*{ box-sizing:border-box; }

/* Hold the scrollbar's room open whether or not there is a scrollbar. Landing in a city locks
   the page scroll, and on any platform that gives the scrollbar its own gutter -- Windows,
   Linux, macOS set to show them always -- taking it away widens the viewport by its width in
   the middle of the flight: the box jumps sideways by half of that and everything measured
   just before the lock is stale by the whole of it. Reserving the gutter means the width the
   page is laid out in never changes. */
html{ scrollbar-gutter:stable; }

body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-mono); -webkit-font-smoothing:antialiased; }

/* The scroll track. Nothing is IN the hero -- the picture lives in the box, which is fixed.
   Four screens of flight, exactly as before, plus the distance the picture has to travel to
   get into place: the opening moves it one pixel per pixel scrolled, so the scroll it costs
   IS the distance it moves. */
.hero{ position:relative; background:var(--paper);
  height:calc(400vh + var(--intro-drop)*100vh); }

.stage{ position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; touch-action:pan-y;
  transition:opacity var(--t-slow) ease; }
/* Held under the map, then dissolved out from under it. The two are in exact register, so
   the overlap reads as the drawing resolving into the real thing -- but only once the street
   map has actually painted (body.mapready). Fading on landing alone left a white pane on a
   cold cache, with the flight already gone. */
body.city .stage{ pointer-events:none; }
body.city.mapready .stage{ opacity:0; transition-delay:.15s; }
.frame{ position:relative; }

.hud{ position:absolute; right:16px; bottom:12px; text-align:right; z-index:var(--z-hud);
  pointer-events:none;
  font:400 var(--fs-11)/var(--lh-read) var(--font-mono); letter-spacing:var(--ls-hud);
  color:var(--text-faint); transition:opacity var(--t-base) ease; }
body.city .hud{ opacity:0; }
.hud b{ color:var(--ink); font-weight:600; }

/* ---- KEYBOARD FOCUS ----
   There was none. Every control relied on the browser's default ring, and the comboboxes
   removed even that with outline:none -- so the page's one required question could be typed
   into with nothing on screen saying where you were.

   One ring, in the page's own line: ink, one rule. INSET, because a surface is clipped to its
   own curve and clip-path clips an element's outline along with everything else it paints, so
   a ring sitting outside the box is simply not drawn. Inset also keeps it inside the capsule,
   whose clip would otherwise cut the ring off its end segments.

   :focus-visible, not :focus, so it answers the keyboard and does not box every mouse click. */
:focus-visible{ outline:var(--rule) solid var(--ink); outline-offset:-4px; }
/* on an ink ground an ink ring is invisible: the black Search button, and a chosen card */
.cap-go:focus-visible, .card2.on:focus-visible, .card .go:focus-visible{
  outline-color:var(--on-ink); }