/* ============================================================
   ARE Trüst — Error Pages Polish (404 + 401)
   Additive layer loaded AFTER aretrust-polish.css.
   Aesthetic: refined editorial luxury — emerald + Libre Baskerville,
   generous whitespace, jewel-like restraint. Token colors only.
   Safe to remove; touches only .nf-* (404) and the 401 redirect shell.
   ============================================================ */

/* ---- 1. 404 stage: intentional, centered, jewel-like ------ */
/* A very soft emerald radial glow + hairline frame give the
   sparse page premium depth without clutter. */
.nf-wrap {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  gap: clamp(.5rem, 2vh, 1.25rem);
  padding: clamp(2rem, 6vh, 5rem) 2rem;
  background:
    radial-gradient(120% 90% at 50% 28%,
      var(--ar-mint) 0%,
      rgba(231, 242, 238, .35) 38%,
      rgba(246, 246, 246, 0) 70%),
    #f6f6f6;
  overflow: hidden;
}

/* Jewel facet: a faint emerald glow bloom behind the code */
.nf-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 26%;
  left: 50%;
  width: min(46rem, 88vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
    rgba(1, 93, 58, .12) 0%,
    rgba(10, 122, 77, .06) 32%,
    rgba(1, 93, 58, 0) 68%);
  pointer-events: none;
}

/* Hairline editorial frame, inset for breathing room */
.nf-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(.75rem, 2.2vh, 1.5rem);
  border: 1px solid rgba(1, 93, 58, .14);
  pointer-events: none;
}

/* ---- 2. Logo: settle it into the composition -------------- */
.nf-wrap .nf-logo {
  margin-bottom: clamp(1.75rem, 5vh, 3rem);
}

/* ---- 3. The 404 itself: oversized serif w/ emerald gradient */
.nf-wrap .nf-code {
  color: var(--ar-emerald);
  letter-spacing: -.02em;
  font-feature-settings: "liga" 1, "kern" 1;
  background: linear-gradient(180deg,
    var(--ar-emerald-bright) 0%,
    var(--ar-emerald) 46%,
    var(--ar-emerald-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gold hairline rule beneath the code — a single jewel accent */
.nf-wrap .nf-code::after {
  content: "";
  display: block;
  width: clamp(2.5rem, 7vw, 4.25rem);
  height: 2px;
  margin: clamp(1rem, 2.5vh, 1.5rem) auto 0;
  background: linear-gradient(90deg,
    rgba(201, 164, 76, 0),
    var(--ar-gold) 50%,
    rgba(201, 164, 76, 0));
}

/* ---- 4. Message: calm, generous ---------------------------- */
.nf-wrap .nf-msg {
  max-width: 30ch;
  color: #333;
  line-height: 1.5;
  text-wrap: balance;
  margin: clamp(1.25rem, 3vh, 1.75rem) auto clamp(1.75rem, 4vh, 2.5rem);
}

/* ---- 5. Return-home CTA: inviting, on-brand ---------------- */
.nf-wrap .nf-link {
  position: relative;
  color: var(--ar-emerald);
  text-decoration: none;
  letter-spacing: .01em;
  padding-bottom: .18rem;
  transition: color .4s var(--ar-ease), gap .4s var(--ar-ease);
}

/* Animated underline grows from the start */
.nf-wrap .nf-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .5s var(--ar-ease), background-color .4s var(--ar-ease);
}

.nf-wrap .nf-link:hover,
.nf-wrap .nf-link:focus-visible {
  color: var(--ar-emerald-bright);
  gap: .75rem;
}
.nf-wrap .nf-link:hover::after,
.nf-wrap .nf-link:focus-visible::after {
  background: var(--ar-gold);
}

/* Arrow nudge on hover */
.nf-wrap .nf-link img {
  transition: transform .45s var(--ar-ease);
}
.nf-wrap .nf-link:hover img,
.nf-wrap .nf-link:focus-visible img {
  transform: translateX(.28rem);
}

/* ---- 6. 401 redirect shell: avoid a flash of broken content */
/* 401.html is a bare <meta refresh> to "/" with no body content.
   Paint the brand backdrop during the brief redirect so it never
   shows as raw white/unstyled. */
body:empty,
body > script:only-child {
  background: #f6f6f6;
}
body:empty {
  min-height: 100vh;
  min-height: 100svh;
}

/* ---- 7. Reduced motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nf-wrap .nf-link,
  .nf-wrap .nf-link::after,
  .nf-wrap .nf-link img {
    transition: none;
  }
}