/* Wide page treatment: the star artwork sits behind the workspace, while
   solid cards keep lessons comfortable to read. */
body {
  background-color: #f5f5ef;
  background-image: url('../assets/backgrounds/hero-desktop.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

.topbar {
  background: #fafbf6e8;
  backdrop-filter: blur(12px);
}

.page-head {
  min-height: 132px;
  padding: 22px 24px;
  border: 1px solid #e0e4d8;
  border-radius: 18px;
  background-color: #f3f0e4;
  background-image:
    linear-gradient(90deg, #f6f3eaf2 0%, #f6f3eacb 56%, #e9eee78c 100%),
    url('../assets/backgrounds/hero-desktop.png');
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 28px #244b3909;
}

.page-head h1,
.page-head p {
  text-shadow: 0 1px 0 #ffffff6b;
}

.hero {
  background-color: #f3f0e4;
  background-image:
    linear-gradient(90deg, #f6f3eaf2 0%, #f6f3eacb 48%, #e9eee7a8 100%),
    url('../assets/backgrounds/hero-desktop.png');
  background-position: center;
  background-size: cover;
  color: #243f40;
  border: 1px solid #e0e4d8;
}

.hero .eyebrow { color: #526c64; }
.hero p { color: #526763; }
.hero-art {
  border-color: #8e9d8c;
  color: #536c65;
  background: linear-gradient(135deg, #ffffff36, #dfe9df55);
}
.hero-art small { color: #657b70; }

.map-surface {
  background-color: #132d39;
  background-image:
    linear-gradient(180deg, #122b37b8, #122b37c9),
    url('../assets/backgrounds/map-desktop.png');
  background-position: center;
  background-size: cover;
}

.map-surface .star-card { background: #10293669; }

@media (max-width: 720px) {
  body {
    background-image: url('../assets/backgrounds/hero-mobile.png');
    background-position: center top;
  }

  .page-head {
    min-height: 145px;
    padding: 18px;
    background-image:
      linear-gradient(180deg, #f6f3eaca 0%, #f6f3eade 68%, #e9eee7a8 100%),
      url('../assets/backgrounds/hero-mobile.png');
    background-position: center 12%;
  }

  .hero {
    background-image:
      linear-gradient(180deg, #f6f3eac9, #f6f3eae8 48%, #e9eee7b8),
      url('../assets/backgrounds/hero-mobile.png');
  }

  .map-surface {
    background-image:
      linear-gradient(180deg, #122b37ad, #122b37cc),
      url('../assets/backgrounds/map-mobile.png');
    background-position: center;
  }
}