/* =========================================================================
   Troutwood — 404

   Page-scoped styles. The tokens, the primitives, the nav, the footer and the
   field's CSS layers all come from tw-system.css; this file only adds the box
   the number is drawn into and the copy that sits under it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   The particle canvas

   Deliberately not .field__canvas. The homepage field's canvas is opaque: it
   washes itself with the base tone every frame, which is how it makes trails.
   This one is cleared to transparent instead, so the gradient, the glow and
   the vignette underneath it all read through, and its trails are drawn as
   segments rather than left in the buffer. Nothing else about the layer
   changes — same fixed, full-viewport, pointer-events:none box.
   ------------------------------------------------------------------------- */

.nf__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------
   The hero

   One screen, and only one: there is nothing below the fold on a 404 to
   scroll to, so the hero's usual deep bottom padding would push the ways out
   off a laptop screen for no reason.
   ------------------------------------------------------------------------- */

.nf {
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

/* The box the number is fitted into. It holds no content of its own: the
   canvas that draws the number is fixed to the viewport, and the script reads
   this element's rect to know where to put it. Which is why the height is in
   vh — the number and everything under it always share one screen. */
.nf__stage {
  position: relative;
  width: min(100%, 36rem);
  height: clamp(7rem, 20vh, 14rem);
  margin: clamp(1.25rem, 3vh, 2rem) auto clamp(1rem, 2.5vh, 1.75rem);
}

/* The no-JS number: same box, same size, drawn with type instead of with
   particles. The inline snippet in the head removes it before first paint
   whenever there is a canvas to draw into, so it never flashes. */
.nf__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(4.5rem, 17vh, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sage);
}

.nf-live .nf__fallback {
  display: none;
}

/* The number is this page's display element, so the headline under it is a
   statement rather than a second display line. */
.nf__title {
  font-size: var(--step-statement);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.nf__sub {
  max-width: 34rem;
  margin-top: 1.25rem;
}

/* -------------------------------------------------------------------------
   Ways out

   Two buttons carry the common cases; this row is for the reader who knows
   where they were trying to get to. Small, quiet, and above the microcopy.
   ------------------------------------------------------------------------- */

.nf__routes {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
}

.nf__routes-label {
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.nf__routes-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 0.875rem;
}

.nf__routes-list li {
  position: relative;
}

/* A hairline between neighbours rather than a bullet, centred in the row's
   own gap so it never has to be measured twice. */
.nf__routes-list li + li::before {
  content: '';
  position: absolute;
  left: -0.625rem;
  top: 0.3em;
  bottom: 0.3em;
  width: 1px;
  background: var(--rule);
}

.nf__routes-list a {
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.nf__routes-list a:hover {
  color: var(--text-primary);
}

.nf__foot {
  margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------
   Print

   tw-system.css hides the whole field, canvas included, so on paper the
   number has to come back as type. Same rule the no-JS page gets, with the
   paper palette's green.
   ------------------------------------------------------------------------- */

@media print {
  .nf-live .nf__fallback {
    display: grid;
    color: #1f6b35;
  }

  .nf__stage {
    height: 8rem;
  }
}