/* =========================================
   VEIL 404 PAGE
========================================= */

body.error404,
body.error404 #main,
body.error404 main,
body.error404 .site-main,
body.error404 .lv-404-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;

  background:
    radial-gradient(circle at top, rgba(90,166,173,.08), transparent 35%),
    linear-gradient(180deg, #050814, #080b12);

  text-align: center;
}

/* =========================================
   HERO
========================================= */

body.error404 .lv-404-hero {
  position: relative;

  min-height: 340px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: hidden;

  text-align: center;

  background-image:
    linear-gradient(rgba(5,10,20,.42), rgba(5,10,20,.88)),
    url('/wp-content/uploads/404-veil-hero.png');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  border-bottom: 1px solid rgba(211,177,106,.32);
}

/* cinematic overlay */
body.error404 .lv-404-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at center,
      rgba(90,166,173,.16),
      transparent 48%),

    radial-gradient(circle at top,
      rgba(139,0,15,.12),
      transparent 58%),

    linear-gradient(
      90deg,
      rgba(3,8,18,.92),
      transparent 45%,
      rgba(3,8,18,.92)
    );

  pointer-events: none;
}

/* hero content */
body.error404 .lv-404-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 980px;

  margin: 0 auto;
  padding: 4rem 1.5rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

/* main title */
body.error404 .lv-404-title {
  margin: 0;

  font-family: "Cinzel", serif;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.05;

  letter-spacing: .08em;
  text-transform: uppercase;

  color: #f5ead6;

  text-align: center;

  text-shadow:
    0 0 18px rgba(0,0,0,.9),
    0 0 42px rgba(90,166,173,.15);
}

/* ornament */
body.error404 .veil-ornament {
  margin: .85rem auto 1rem;

  text-align: center;

  font-size: 1.4rem;

  color: #d3b16a;

  text-shadow:
    0 0 12px rgba(211,177,106,.35);
}

/* subtitle */
body.error404 .lv-404-kicker {
  margin: .35rem auto 1rem;

  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 2vw, 1.35rem);

  letter-spacing: .26em;
  text-transform: uppercase;

  color: #5aa6ad;

  text-align: center;

  text-shadow:
    0 0 12px rgba(90,166,173,.35),
    0 0 24px rgba(90,166,173,.12);
}

/* text */
body.error404 .lv-404-text {
  max-width: 760px;

  margin: 0 auto 2rem;

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.6;

  color: #e8dcc7;

  text-align: center;

  text-shadow:
    0 0 12px rgba(0,0,0,.75);
}

/* =========================================
   BUTTONS
========================================= */

body.error404 .lv-404-actions,
body.error404 .lv-404-button-grid {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  flex-wrap: wrap;
  gap: 1rem;

  text-align: center;

  margin-left: auto;
  margin-right: auto;
}

body.error404 .lv-404-path {
  min-width: 190px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  text-align: center;
}

/* =========================================
   LOWER SECTION
========================================= */

body.error404 .lv-404-paths {
  padding: 4rem 8%;

  text-align: center;
}

body.error404 .lv-404-inner {
  width: 100%;
  max-width: 1000px;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

body.error404 .lv-404-inner .lv-h2,
body.error404 .lv-404-inner .lv-sub {
  text-align: center;
}

/* sigil divider */
body.error404 .veil-sigil-divider {
  margin: 1.5rem auto;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  body.error404 .lv-404-hero {
    min-height: 300px;
  }

  body.error404 .lv-404-content {
    padding: 3rem 1.25rem;
  }

  body.error404 .lv-404-paths {
    padding: 3rem 1.25rem;
  }

  body.error404 .lv-404-button-grid {
    flex-direction: column;
    align-items: center;
  }

  body.error404 .lv-404-path {
    width: 100%;
    max-width: 320px;
  }

}