body.page-archive {
  background:
    radial-gradient(circle at top, rgba(114, 98, 63, 0.08), transparent 34%),
    linear-gradient(180deg, #0d1419 0%, var(--bg) 44%, #090e12 100%);
}

body.page-reference.page-archive::before,
body.page-reference.page-archive::after {
  display: none;
}

.page-archive .reference-shell,
.page-archive .reference-layout {
  position: relative;
  z-index: 1;
}

.page-archive .reference-main {
  position: relative;
  overflow: hidden;
  padding: 18px 24px 32px;
  background: rgba(51, 51, 51, 0.18);
  color: #ffffff;
  isolation: isolate;
}

.page-archive .reference-main::before {
  content: "";
  position: fixed;
  inset: 0 0 0 var(--panel-width);
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 20, 16, 0.22), rgba(18, 20, 16, 0.34)),
    radial-gradient(circle at 22% 18%, rgba(214, 191, 122, 0.11), transparent 18%),
    radial-gradient(circle at 78% 28%, rgba(214, 191, 122, 0.09), transparent 22%),
    radial-gradient(circle at 76% 76%, rgba(214, 191, 122, 0.07), transparent 24%),
    url("/assets/bletchley/media/enigma-backdrop.svg?v=site14") center top / cover no-repeat;
  opacity: 0.78;
}

.page-archive .reference-main::after {
  content: "";
  position: fixed;
  inset: 0 0 0 var(--panel-width);
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 52px,
      rgba(214, 191, 122, 0.026) 52px,
      rgba(214, 191, 122, 0.026) 53px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 132px,
      rgba(214, 191, 122, 0.02) 132px,
      rgba(214, 191, 122, 0.02) 133px
    );
  opacity: 0.84;
}

.page-archive .reference-main > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 1080px) {
  .page-archive .reference-main::before,
  .page-archive .reference-main::after {
    left: 0;
  }
}

@media (max-width: 900px) {
  .page-archive .mode-panel {
    min-height: 100svh;
    padding-bottom: 22px;
    background:
      url("/assets/media/template-101/paper-left-menu.png") left 84px / 100% auto no-repeat,
      linear-gradient(180deg, #3a3a3a 0%, #303030 100%);
  }

  .page-archive .mode-panel::after {
    inset: 78px 10px 12px 10px;
  }
}