@charset "UTF-8";

/* ==========================================================================
   AVAVA — 404 page
   Only what this page adds. The light header, the page-header block and the
   divider rhythm are the inner-page template and live in style.css.

   No accent is set here: the page inherits the colour from the home page the
   visitor came through.

   TABLE OF CONTENTS
   -----------------------------------------------------------------------
   01. The stage
   02. Search field
   03. Route strip
   04. Responsive
   ========================================================================== */


/* ==========================================================================
   01. The stage
   ========================================================================== */

/* One panel, and the routes are pushed to its bottom edge whatever the
   viewport height — that is what makes the page feel like a way out rather
   than a stub. */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 620px;
  border-radius: 30px;
  overflow: hidden;
  background: var(--ink);
  color: #FFFFFF;
}

/* Wallpaper, not a headline: the alpha is low enough that the copy reads
   straight over it. */
.stage__num {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: 400px;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .13);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.stage__top { position: relative; padding: 48px 46px 0; }

.stage__live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
}

.stage__h {
  max-width: 760px;
  margin-top: 20px;
  font-size: clamp(32px, 3.4vw, 56px);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1.02;
}

.stage__sub {
  max-width: 560px;
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
}


/* ==========================================================================
   02. Search field
   ========================================================================== */

/* Presentational on this build — styled and labelled, but with no index
   behind it yet, so deliberately not a <form>: an empty submit would reload
   the page for nothing. */
.lostfind { position: relative; max-width: 640px; margin-top: 28px; }

.lostfind__glass {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: rgba(255, 255, 255, .5);
  pointer-events: none;
}

.lostfind__input {
  width: 100%;
  height: 62px;
  padding: 0 138px 0 52px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 500;
  color: #FFFFFF;
}

.lostfind__input::placeholder { color: rgba(255, 255, 255, .42); }

.lostfind__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lostfind__input::-webkit-search-decoration,
.lostfind__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.lostfind__go {
  position: absolute;
  right: 8px;
  top: 8px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 9px 0 20px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  transition: background .2s ease;
}

.lostfind__go:hover { background: var(--accent-hi); color: var(--ink); }

.lostfind__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
}


/* ==========================================================================
   03. Route strip
   ========================================================================== */

/* Six equals, and the 1px gap over a hairline background is the divider. */
.routes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .14);
}

.route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px;
  background: var(--ink);
  color: #FFFFFF;
  transition: background .2s ease;
}

.route:hover { background: #1B1E23; color: #FFFFFF; }

.route__no {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .42);
}

.route__title { display: block; margin-top: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }

.route__why { display: block; margin-top: 6px; font-size: 13.5px; color: rgba(255, 255, 255, .56); }

.route__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  color: #FFFFFF;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* One clear primary among six equals. */
.route__go--first { border-color: var(--accent); background: var(--accent); color: var(--ink); }

.route:hover .route__go { border-color: var(--accent); background: var(--accent); color: var(--ink); }


/* ==========================================================================
   04. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .routes { grid-template-columns: repeat(2, 1fr); }
  .stage__top { padding: 38px 34px 0; }
  .route { padding: 22px 24px; }
}

@media (max-width: 780px) {
  .stage { min-height: 520px; border-radius: 24px; }
  .stage__top { padding: 30px 22px 0; }

  /* The wordmark has to shrink with the stage or it runs off the panel.
     "404" measures 3.74x its own font size, so 22vw keeps it inside the
     40px page gutter at every phone width. */
  .stage__num { font-size: 22vw; top: 44%; }

  .lostfind__input { height: 56px; padding: 0 18px 0 46px; font-size: 15.5px; }
  .lostfind__glass { left: 16px; top: 28px; transform: none; }
  .lostfind__go {
    position: static;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    padding: 0 9px 0 20px;
  }

  .routes { grid-template-columns: minmax(0, 1fr); margin-top: 34px; }
  .route { padding: 18px 22px; }
}

@media (max-width: 560px) {
  .route__title { font-size: 17px; }
}