/* ========================================================================== 
   YOLZ SHARED ATMOSPHERE
   Restrained geometric framing and gold haze for the wider site.
   ========================================================================== */

body {
  position: relative;
  isolation: isolate;
  background-color: #050505;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

body::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 11% 91%, rgba(212, 175, 55, 0.085), transparent 27rem),
    radial-gradient(ellipse at 52% 1%, rgba(212, 175, 55, 0.052), transparent 35rem),
    radial-gradient(ellipse at 96% 58%, rgba(212, 175, 55, 0.024), transparent 26rem),
    repeating-linear-gradient(116deg, transparent 0 5.5rem, rgba(240, 207, 112, 0.007) 5.55rem 5.6rem);
}

body::after {
  left: -7rem;
  bottom: -9rem;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgba(212, 175, 55, 0.06);
  transform: rotate(45deg);
  box-shadow:
    0 0 0 3rem rgba(212, 175, 55, 0.012),
    0 0 0 7rem rgba(212, 175, 55, 0.008);
}

body > .site-header,
body > main,
body > .site-footer {
  position: relative;
  z-index: 1;
}

/* A quiet bracket around the global header echoes the refined welcome page. */
.site-header {
  position: relative;
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 1.55rem;
  height: 3.45rem;
  opacity: 0.82;
  pointer-events: none;
}

.site-header::before {
  left: -1px;
  border-left: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-dark);
}

.site-header::after {
  right: -1px;
  border-right: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-dark);
}

/* Frame the primary workspace without adding decorative markup to every page. */
body > main::before,
body > main::after {
  content: "";
  position: absolute;
  z-index: 8;
  width: 1.75rem;
  height: 1.75rem;
  pointer-events: none;
}

body > main::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid rgba(240, 207, 112, 0.9);
  border-left: 1px solid rgba(240, 207, 112, 0.9);
}

body > main::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid rgba(240, 207, 112, 0.86);
  border-bottom: 1px solid rgba(240, 207, 112, 0.86);
}

/* The haze belongs inside the workspace too, rather than only behind it. */
.portfolio-stage,
.split-shell,
.grade12-workspace,
.ecosystem-page main,
.worlds-page main {
  background-image:
    radial-gradient(ellipse at 4% 96%, rgba(212, 175, 55, 0.06), transparent 22rem),
    radial-gradient(ellipse at 76% 3%, rgba(212, 175, 55, 0.028), transparent 29rem),
    linear-gradient(112deg, rgba(212, 175, 55, 0.022), transparent 34%, rgba(212, 175, 55, 0.008) 75%, transparent);
}

/* Give left rails the warmer depth established on Welcome and CAT pages. */
.profile-rail,
.identity-frame,
.grade12-navigation {
  background-image:
    radial-gradient(ellipse at 12% 94%, rgba(212, 175, 55, 0.095), transparent 19rem),
    linear-gradient(145deg, rgba(212, 175, 55, 0.035), transparent 54%);
}

/* A faint upper haze keeps right panels from feeling stark or flat. */
.portfolio-explorer,
.story-frame,
.grade12-content {
  background-image:
    radial-gradient(ellipse at 48% -8%, rgba(212, 175, 55, 0.03), transparent 31rem),
    linear-gradient(112deg, rgba(212, 175, 55, 0.012), transparent 42%);
}

@media (max-width: 700px) {
  body::after {
    width: 20rem;
    height: 20rem;
  }

  .site-header::before,
  .site-header::after {
    width: 1rem;
    height: 2.2rem;
    opacity: 0.65;
  }

  body > main::before,
  body > main::after {
    width: 1.15rem;
    height: 1.15rem;
  }
}