:root {
  --bg: #070912;
  --panel: rgba(10, 14, 26, 0.72);
  --panel-strong: rgba(12, 17, 30, 0.84);
  --text: #f5ead7;
  --muted: #c8baa0;
  --gold: #d7b268;
  --gold-bright: #ffe0a3;
  --blue: #78a9ff;
  --shadow: rgba(0, 0, 0, 0.45);
  --border: rgba(255, 225, 160, 0.2);
  --border-strong: rgba(255, 225, 160, 0.55);

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;

  --transition-fast: 180ms ease;
  --transition-med: 280ms ease;
  --transition-slow: 520ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--site-font-body, Baskervville, Georgia, serif);
  background:
    radial-gradient(circle at 50% 6%, rgba(36, 115, 126, 0.18), transparent 34rem),
    linear-gradient(180deg, rgba(5, 15, 28, 0.32), #06101d 46rem, #07111d 100%);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 12, 22, 0.56), rgba(4, 12, 22, 0.18) 36%, rgba(4, 12, 22, 0.24) 68%, rgba(4, 12, 22, 0.62)),
    image-set(
      url("../assets/optimized/images/live/earth_beacon_base_map.e6bde35c6820.webp") type("image/webp"),
      url("../assets/images/live/earth_beacon_base_map.23c428f42aec.png") type("image/png")
    );
  background-position: center top;
  background-size: cover;
  opacity: 0.34;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
}

button {
  font: inherit;
}

.page-shell {
  position: relative;
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 80px;
}

.background-overlay {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 8, 16, 0.08) 0%, rgba(3, 8, 16, 0.52) 58%, #06101d 100%);
}

.selected-label {
  margin-bottom: 8px;
  color: var(--gold-bright);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hidden {
  display: none !important;
}

/* Search-support copy: visible enough for users and crawlers, quiet enough for the ornate UI. */
.seo-support-copy {
  max-width: 980px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(204, 170, 98, 0.24);
  border-radius: 10px;
  background: rgba(9, 12, 18, 0.38);
  color: rgba(242, 225, 178, 0.78);
  font-family: Baskervville, Georgia, serif;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.55;
  text-align: center;
}

.seo-support-copy p {
  margin: 0;
}

@keyframes fadeSlideUp {
  from {
    transform: translateY(22px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 820px) {
  body {
    background-attachment: scroll;
  }

  .page-shell {
    width: min(100% - 24px, 1480px);
    padding-top: 34px;
  }
}