/* Hallmark · macrostructure: existing 404 sculpture · tone: frosted glass · anchor hue: brand blue */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 */
/* =================================================================
   notfound.css — 404 page (404.html).
   Centered "page not found" block with the brand blue and links back
   into the site. Tokens come from css/base.css.
   ================================================================= */

.nf {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  padding: calc(var(--header-h) + var(--sp-9)) 0 var(--sp-11);
  text-align: center;
}

.nf-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nf-scene {
  padding: var(--sp-7) var(--sp-4) var(--sp-2);
  max-width: 100%;
  perspective: var(--nf-perspective);
  border-radius: var(--r-md);
  transform: translate3d(var(--nf-x, 0px), var(--nf-y, 0px), 0);
  transition: transform var(--nf-return-duration) var(--ease);
}

.nf-scene[tabindex] {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.nf-scene:focus-visible:not(.is-pointer) {
  outline: 2px solid var(--c-blue);
  outline-offset: var(--sp-1);
}

.nf-scene.is-pointer { outline: none; }

.nf-scene.is-dragging {
  cursor: grabbing;
  transition: none;
}

/* Front, back and contour walls form a closed extrusion. */
.nf-code {
  display: grid;
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--nf-size);
  height: 1.1em;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transform-style: preserve-3d;
  transform: rotateX(var(--nf-rx, -6deg)) rotateY(var(--nf-ry, -8deg)) rotateZ(var(--nf-rz, 0deg));
  transition: transform var(--nf-return-duration) var(--ease);
  pointer-events: none;
}

.nf-scene.is-dragging .nf-code { transition: none; }

.nf-face {
  grid-area: 1 / 1;
  transform: translateZ(calc(var(--nf-depth) / 2));
}

.nf-face {
  background: var(--nf-glass-face);
  background-color: var(--nf-glass-frost);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nf-face[style] {
  background-clip: border-box;
  -webkit-background-clip: border-box;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.nf-back { transform: translateZ(calc(var(--nf-depth) / -2)); }

.nf-side {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--nf-depth);
  transform-origin: 0 0;
  background: var(--nf-glass-side);
}

.nf-title {
  margin-top: var(--sp-2);
}

.nf .page-subtitle {
  margin-top: var(--sp-2);
}

.nf-lead {
  margin-top: var(--sp-5);
  max-width: 32rem;
  font-size: var(--text-md);
  line-height: 1.9;
  color: var(--c-muted);
}

.nf-actions {
  margin-top: var(--sp-8);
  display: flex;
  justify-content: center;
}

.nf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-surface-2);
  background: var(--c-bg);
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.nf-btn-primary {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-on-accent);
}

.nf-btn-primary:hover {
  filter: brightness(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .nf-scene,
  .nf-code { transition: none; }
}