* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background: #05070d;
  color: #f4ead2;
  line-height: 1.6;
}

.site-header {
  background: #080b12;
  border-bottom: 1px solid #5f4b2a;
  padding: 24px 16px;
  text-align: center;
}

.site-header h1 {
  margin: 0;
  font-size: 2.4rem;
  letter-spacing: 1px;
  color: #f7d88a;
}

.tagline {
  margin: 8px 0 18px;
  color: #c9b98d;
}

nav a {
  color: #f7d88a;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
}

nav a:hover {
  color: #ffffff;
}

.hero {
  min-height: 72vh;
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.75)),
    radial-gradient(circle at center, #273a61 0%, #05070d 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 18px;
}

.hero-content {
  max-width: 850px;
}

.eyebrow {
  color: #bfa46a;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .9rem;
}

.hero h2 {
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  margin: 10px 0;
  color: #fff1bd;
}

.hero p {
  font-size: 1.2rem;
  color: #eee0bd;
}

.button {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 24px;
  border: 1px solid #f7d88a;
  border-radius: 999px;
  color: #05070d;
  background: #f7d88a;
  text-decoration: none;
  font-weight: bold;
}

.content-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 42px 18px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.card {
  background: linear-gradient(145deg, #101827, #090d16);
  border: 1px solid #4d3e24;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.card h2 {
  margin-top: 0;
  color: #f7d88a;
  font-size: 2rem;
}

.quote {
  font-size: 1.35rem;
  color: #fff1bd;
  font-style: italic;
}

.crystal-card {
  border-color: #7aa7ff;
  box-shadow: 0 0 45px rgba(91, 141, 255, .18);
}

.enter-card {
  text-align: center;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.link-grid a {
  padding: 14px;
  border: 1px solid #5f4b2a;
  border-radius: 14px;
  color: #f7d88a;
  text-decoration: none;
  background: #080b12;
}

.link-grid a:hover {
  background: #151f33;
}

footer {
  text-align: center;
  padding: 32px 18px;
  color: #a99a75;
  border-top: 1px solid #2c2418;
}

@media (max-width: 760px) {
  .split,
  .link-grid {
    grid-template-columns: 1fr;
  }

  nav a {
    display: inline-block;
    margin: 6px;
  }
}
/* ===== ATMOSPHERIC EFFECTS ===== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08) 1px, transparent 2px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.06) 1px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,0.05) 1px, transparent 2px),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,0.07) 1px, transparent 2px);
  background-size: 400px 400px;
  animation: starDrift 120s linear infinite;
  pointer-events: none;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(60,90,160,0.08), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

@keyframes starDrift {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-400px);
  }
}

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

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at top, rgba(120,150,255,0.15), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.75));

  animation: pulseGlow 8s ease-in-out infinite alternate;

  pointer-events: none;
}

@keyframes pulseGlow {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}

/* ===== FLOATING FOG ===== */

.content-section::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 0;
  width: 120%;
  height: 100%;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(255,255,255,0.015),
      transparent
    );

  animation: fogMove 18s linear infinite;

  pointer-events: none;
}

.content-section {
  position: relative;
  overflow: hidden;
}

@keyframes fogMove {
  from {
    transform: translateX(-10%);
  }

  to {
    transform: translateX(10%);
  }
}

/* ===== CRYSTAL EARTH GLOW ===== */

.crystal-card {
  position: relative;
}

.crystal-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;

  top: -40px;
  right: -40px;

  background:
    radial-gradient(circle, rgba(120,170,255,0.22), transparent 70%);

  border-radius: 50%;

  animation: crystalPulse 6s ease-in-out infinite alternate;

  pointer-events: none;
}

@keyframes crystalPulse {
  from {
    transform: scale(1);
    opacity: 0.4;
  }

  to {
    transform: scale(1.2);
    opacity: 0.9;
  }
}
/* ===== PAGE BACKGROUND IMAGES ===== */

.hero {
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.75)),
    url("Images/tower-exterior.jpg");
  background-size: cover;
  background-position: center;
}

.council-hero {
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.78)),
    url("Images/roundtable-room.jpg");
  background-size: cover;
  background-position: center;
}

.observatory-hero {
  background:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.8)),
    url("Images/observatory-stars.jpg");
  background-size: cover;
  background-position: center;
}

.archives-hero {
  background:
    linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.82)),
    url("Images/archives-vault.jpg");
  background-size: cover;
  background-position: center;
}