/* FCS Magazine — error-404.hbs (and future error.hbs) styles.
 *
 * Spec: Doc #163 §2e.
 * Single full-viewport-height section, paper-deep ground. Large 404 numerals
 * + eyebrow + headline + body + two CTAs. Brand-consistent with the homepage
 * proof-spine ground so a 404 still feels like FCS.
 */

.error-page {
  min-height: 100vh;
  background: var(--paper-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem 4rem;
  position: relative;
  overflow: hidden;
}

.error-page::before {
  /* Same ambient gradient family as page-hero / archive-header — keeps the
   * 404 ground in the same visual register as the rest of the inner pages. */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(207, 125, 95, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(91, 140, 106, 0.07) 0%, transparent 45%);
  pointer-events: none;
}

.error-page-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.error-page-numerals {
  font-family: var(--font-display);
  /* Doc #163 §2e: clamp(8rem, 18vw, 16rem). Held to weight 700, not 800 —
   * the masthead-Zodiak rule from Doc #158 §4 says each top-of-hierarchy
   * moment must be smaller than the next downstream moment. The homepage
   * hero uses Clash 700; introducing 800 here would create a new unused
   * weight class. The size already reads as "the biggest moment." */
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--sage-deep);
  margin-bottom: 2rem;
  /* Center the eyebrow alignment under the numerals */
  user-select: none;
}

.error-page-inner > .section-eyebrow {
  /* Eyebrow is inline-flex globally — text-align on the centered parent
   * (.error-page-inner) handles inline alignment. No override needed; rule
   * kept as a hook in case layout changes. */
}

.error-page-headline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 1.25rem;
}

.error-page-body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-top: 1.25rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.error-page-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.error-page-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.error-page-cta--primary {
  background: var(--copper);
  color: white;
  box-shadow: var(--shadow-copper);
}

.error-page-cta--primary:hover {
  background: var(--copper-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 35px -8px rgba(207, 125, 95, 0.45);
}

.error-page-cta--secondary {
  background: white;
  color: var(--copper);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--rule);
}

.error-page-cta--secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
  color: var(--copper-dark);
}

.error-page-cta svg { transition: transform 0.3s ease; }
.error-page-cta:hover svg { transform: translateX(3px); }

@media (max-width: 640px) {
  .error-page { padding: 6rem 1.25rem 3rem; }
  .error-page-actions { flex-direction: column; width: 100%; }
  .error-page-cta { width: 100%; justify-content: center; }
}