/* ------------------------------------------------------------------
   FALLBACK DOCUMENT ONLY.
   The scene carries zero CSS: every scene node is styled at runtime by
   the Ark atomizer. This file exists so the same content is a readable
   page with JavaScript off, and so screen readers get real semantics
   (a heading and paragraphs) rather than a stack of divs.

   States, driven by two classes on <html>:
     (none)      no JS: the fallback is the page
     .js         JS is on and rendering: hide the fallback so it never flashes
     .js.ark-live  the scene is up: keep the fallback for assistive
                 technology, visually hidden
   ------------------------------------------------------------------ */
html, body { margin: 0; padding: 0; background: #000; }

#fallback {
  display: block;
  background: #000;
  color: #8a8a94;
  font-family: "Albert Sans", "Avenir Next", "Helvetica Neue", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  padding: 72px 24px 110px;
  -webkit-font-smoothing: antialiased;
}
#fallback .wrap { max-width: 640px; margin: 0 auto; }
#fallback .eyebrow {
  margin: 0 0 28px; font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: #6a6a76;
}
#fallback h1 { margin: 0 0 14px; font-size: 24px; line-height: 1.3; font-weight: 700; color: #fff; }
#fallback .lede { margin: 0 0 28px; font-size: 20px; font-weight: 300; color: #c8c8c8; }
#fallback p { margin: 0 0 22px; }
#fallback .brand { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .3em; color: #fff; }
#fallback nav { margin: 0 0 56px; }
#fallback nav a { margin-right: 22px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
#fallback a { color: #c8c8c8; text-decoration: underline; text-underline-offset: 3px; }
#fallback a:hover { color: #fff; }
#fallback :focus-visible { outline: none; color: #e2ece5; background: #24382c; }

/* JS is on and has not finished rendering: keep the fallback from flashing. */
.js #fallback { visibility: hidden; }

/* The scene is live: visually hidden, still in the accessibility tree. */
.js.ark-live #fallback {
  visibility: visible;
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}