body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #f2f2f2;
  /* No background here — each page defines its own */
}

/* === GLOBAL STACK ORDER RESET (fixed for transparency) === */
header, footer, .hero-text {
  position: relative;
  z-index: 2; /* these stay above page backgrounds */
}

main, section {
  position: static; /* ✅ restores normal stacking, no overlay */
  z-index: auto;
}

/* Global font setup for all headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Rubik Mono One', sans-serif;
}

header {
  background: transparent;  /* ✅ no separate background */
  color: #fff;
  padding: 15px 20px;       /* ✅ tighter top/bottom padding */
  text-align: left;
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
  position: relative;
  overflow: visible;
  z-index: 1000;
  height: auto;             /* ✅ automatically fits logo + menu */
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 15px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

main {
  padding: 40px 20px;
  margin-top: 260px; /* pushes blurb down further from header */
  position: relative;
  z-index: 5; /* ✅ ensure text renders above image layer */
}

h1 {
  font-size: clamp(1.8rem, 4vw + 1rem, 5rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #f2f2f2;
  text-shadow:
    0 0 12px rgba(0, 255, 255, 0.4),
    0 0 25px rgba(0, 128, 255, 0.3),
    0 0 40px rgba(128, 0, 255, 0.3);
  animation: auroraGlow 12s ease-in-out infinite alternate;
  margin: 0;
}

@keyframes auroraGlow {
  0% {
    text-shadow:
      0 0 12px rgba(0, 255, 255, 0.4),
      0 0 25px rgba(0, 128, 255, 0.3),
      0 0 40px rgba(128, 0, 255, 0.3);
  }
  50% {
    text-shadow:
      0 0 15px rgba(255, 0, 200, 0.35),
      0 0 35px rgba(0, 255, 180, 0.3),
      0 0 45px rgba(0, 180, 255, 0.25);
  }
  100% {
    text-shadow:
      0 0 12px rgba(180, 255, 255, 0.4),
      0 0 25px rgba(80, 180, 255, 0.3),
      0 0 40px rgba(200, 120, 255, 0.3);
  }
}

/* === HAMBURGER MENU === */
/*.menu-icon {
  position: absolute;
  top: 25px;
  left: 40px;
  font-size: 2em;
  color: #f2f2f2;
  cursor: pointer;
  z-index: 1000;
}
*/

/* Hidden menu panel */
/* === DROPDOWN MENU STYLING === */
.hidden-menu {
  position: absolute;
  left: 100px;       /* ✅ lines up under the hamburger icon */
  top: 80px;         /* ✅ drops directly below the icon */
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  text-align: left;
  padding: 8px 16px;
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  width: max-content;

  /* ✅ fade-in / fade-out behavior */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ✅ hover trigger for both icon and dropdown area */
.menu-icon:hover + .hidden-menu,
.hidden-menu:hover {
  display: block;             /* keep menu visible */
  opacity: 1;                 /* fade in */
  visibility: visible;        /* allow clicking */
}

/* ✅ Display dropdown when hovering over the menu icon */
.menu-icon:hover + .hidden-menu,
.hidden-menu:hover {
  display: block;
}

.hidden-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hidden-menu li {
  display: block;        /* each link on its own line */
  margin: 6px 0;         /* smaller vertical spacing between items */
  padding-left: 4px;     /* slightly less left padding */
  text-align: left;      /* keeps text aligned neatly */
}

.hidden-menu a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 0.9em;
  padding: 3px 6px;
  transition: all 0.2s ease-in-out;
}

.hidden-menu a:hover {
  color: #7ef8e2;
  text-shadow: 0 0 10px rgba(126, 248, 226, 0.8), 
               0 0 20px rgba(0, 255, 255, 0.6);
}

/* Toggle visibility when menu is active */
.hidden-menu.show {
  display: block;
}

/* === FOOTER NAVIGATION === */
footer {
  text-align: center;
  padding: 20px 10px;
  background: transparent;
  color: #aaa;
  font-size: 0.8em;
  letter-spacing: 1px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.footer-nav a {
  color: #aaa;
  text-decoration: none;
  margin: 0 8px;
  font-family: Arial, sans-serif;
}

.footer-nav a:hover {
  color: #7ef8e2;
}

.hero-text {
  position: absolute;
  top: 8vh;              /* consistent vertical placement across pages */
  left: 50%;             /* centered across all screens */
  transform: translateX(-50%);
  text-align: center;
  width: 90vw;           /* matches your other pages’ scaling */
  z-index: 1;
}

.hero-text h1 {
  margin: 0;
  font-size: clamp(1.4rem, 2.5vw + 0.5rem, 3rem); /* ✅ balanced scaling */
  color: #f2f2f2;
  text-align: center;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: keep-all;
  text-shadow:
    0 0 12px rgba(0, 255, 255, 0.4),
    0 0 25px rgba(0, 128, 255, 0.3),
    0 0 40px rgba(128, 0, 255, 0.3);
  animation: auroraGlow 12s ease-in-out infinite alternate;
}

/* Optional: styling for “Experience” on the second line */
.hero-text .subline {
  display: block;
  font-size: 1.1em;          /* Slightly larger than main line */
  letter-spacing: 2px;
  margin-top: 0.2em;
}

/* === HEADER LEFT CLUSTER (logo + hamburger) === */
.header-left {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 60px;
  position: absolute;   /* ✅ ensures it pins to top-left corner */
  top: 10px;            /* ✅ nudges slightly down from top edge */
  left: 30px;           /* ✅ small offset from left edge */
  height: 150px;
  z-index: 2000;
}

.small-logo {
  height: clamp(60px, 10vw, 140px);  /* ✅ scales with viewport width */
  width: auto;
  cursor: pointer;
  object-fit: contain;
  display: block;
}

.menu-icon {
  font-size: clamp(2rem, 6vw, 4.2rem);  /* ✅ responsive icon scaling */
  color: #f2f2f2;
  cursor: pointer;
  z-index: 3000;
  line-height: 1;
  position: absolute;
  left: clamp(80px, 8vw, 150px);      /* ✅ moves dynamically based on screen width */
  right: auto;
  top: clamp(10px, 3vh, 30px);        /* ✅ scales vertical position smoothly */
}

/* === WELCOME PAGE STYLING === */
body.welcome-page {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Rubik Mono One', sans-serif;
  background: black;
  color: #fff;
}

.welcome-container {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.welcome-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.6); /* darkens for contrast */
}

.welcome-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 20px;
}

.welcome-overlay h1 {
  font-size: 3em;
  margin-bottom: 0.5em;
  color: #f2f2f2;
  text-shadow:
    0 0 15px rgba(0, 255, 255, 0.4),
    0 0 30px rgba(0, 128, 255, 0.3),
    0 0 45px rgba(128, 0, 255, 0.3);
}

.welcome-overlay p {
  font-size: 1.2em;
  color: #ddd;
  margin-bottom: 1.5em;
}

.enter-button {
  display: inline-block;
  background: rgba(0, 255, 255, 0.2);
  border: 2px solid #00ffff;
  color: #fff;
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1em;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.enter-button:hover {
  background: #00ffff;
  color: #000;
  box-shadow: 0 0 25px #00ffff;
}

/* === UNIQUE BACKGROUNDS FOR EACH PAGE === */

/* === HOME PAGE FIX: Visible text above background === */
/* --- HOMEPAGE BACKGROUND FIX --- */
/* === HOMEPAGE BACKGROUND (STATIONARY + TEXT FIX) === */
/* === HOMEPAGE BACKGROUND FIX WRAPPER === */
body.home-page {
  position: relative;   /* ✅ establishes a stacking context */
  overflow-x: hidden;   /* ✅ prevents horizontal scrollbars */
  background: black;    /* ✅ fallback color behind image */
  z-index: 0;           /* ✅ ensures text sits above ::before */
}

/* The image now lives in a safe, fixed layer behind content */
body.home-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./images/PHOTO-2024-08-12-15-38-55_2.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  z-index: -1; /* ✅ keeps it behind all text and content */
}

body.history-page {
  background: url("./images/Daniel.jpg") center/cover fixed no-repeat;
}

body.scheduler-page {
  background: url("./images/dempseyscheduler.jpg") center/cover fixed no-repeat;
}

/* body.bofe-family-page {
  background: url("./images/PHOTO-2024-08-25-08-28-30.jpg") center/cover fixed no-repeat;
} */

/* === HISTORY PAGE BACKGROUND === */
body.history-page {
  background-image: url("./images/Daniel.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;   /* ✅ custom scaling — adjust between 100% and 130% to taste */
  background-position: center 42%;  /* ✅ keeps focus on top area of the photo */
  background-color: black;  /* fills in space if image doesn’t cover entire screen */
}

/* === SCHEDULER PAGE BACKGROUND === */
body.scheduler-page {
  background-image: url("./images/dempseyscheduler.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;   /* ✅ custom scaling — adjust between 100% and 130% to taste */
  background-position: 90% 45%;  /* ✅ keeps focus on top area of the photo */
  background-color: black;  /* fills in space if image doesn’t cover entire screen */
}

/* === BOFE FAMILY PAGE BACKGROUND ===
body.bofe-family-page {
  background-image: url("./images/PHOTO-2024-08-25-08-28-30.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;  //    ✅ custom scaling — adjust between 100% and 130% to taste
  background-position: center 25%;  //   ✅ keeps focus on top area of the photo
  background-color: black;  //   fills in space if image doesn’t cover entire screen
}
*/

/* === RECORDINGS PAGE BACKGROUND === */
body.recordings-page {
  background-image: url("./images/marie_recordingimage.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;   /* ✅ custom scaling — adjust between 100% and 130% to taste */
  background-position: 50% 34.5%;  /* ✅ keeps focus on top area of the photo */
  background-color: black;  /* fills in space if image doesn’t cover entire screen */
}

/* === SCHEDULER SPLIT LAYOUT === */
.scheduler-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem;
  padding: 3rem 5vw;
  color: #f2f2f2;
}

.schedule-section,
.booking-section {
  flex: 1 1 45%;
  background: rgba(0, 0, 0, 0.5);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.25);
  min-width: 300px;
}

.schedule-section h2,
.booking-section h2 {
  color: #7ef8e2;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.2rem;
}

/* EVENT CARDS */
.event-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 15px rgba(0,255,255,0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.event-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.35);
}

.event-card h3 {
  margin: 0;
  color: #7ef8e2;
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.event-card p {
  margin: 0.3rem 0;
  color: #ddd;
}

/* BOOKING FORM */
.booking-form label {
  display: block;
  margin-top: 1rem;
  font-weight: bold;
  color: #7ef8e2;
}
.booking-form input,
.booking-form textarea {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem;
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1em;
}

.booking-form button {
  margin-top: 1.2rem;
  background: #00ffff;
  color: #000;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.booking-form button:hover {
  box-shadow: 0 0 20px #00ffff;
}

/* QR BOX */
.qr-box {
  text-align: center;
  margin-top: 2rem;
}
.qr-code {
  width: 140px;
  height: 140px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,255,255,0.4);
}

/* Responsive layout for smaller screens */
@media (max-width: 900px) {
  .scheduler-container {
    flex-direction: column;
  }
}

.qr-box {
  text-align: center;
  margin-top: 30px;
}

.qr-code {
  width: 180px;
  height: 180px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qr-code:hover {
  transform: scale(1.05);
  box-shadow: 0 0 35px rgba(0, 255, 255, 0.6);
}

.qr-box p {
  color: #f2f2f2;
  font-size: 1em;
  margin-top: 10px;
  letter-spacing: 1px;
}

/* Responsive resize for mobile */
@media (max-width: 768px) {
  .album-container {
    width: 45vw;
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .album-container {
    width: 25vw;
    max-width: 400px;
  }
}

.album-art {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

.album-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none; /* ✅ removes the translucent box */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.album-title {
  font-family: 'Rubik Mono One', sans-serif;
  font-size: clamp(2rem, 4vw, 4rem);
  color: #7ef8e2;
  text-shadow:
    0 0 10px rgba(0, 255, 255, 0.6),
    0 0 25px rgba(128, 0, 255, 0.4);
  margin-bottom: 20px;
}

.tracklist {
  list-style: none;
  padding: 0;
}

.tracklist li {
  margin: 10px 0;
}

.tracklist a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1em;
  transition: color 0.3s, text-shadow 0.3s;
}

.tracklist a:hover {
  color: #7ef8e2;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .album-cover {
    width: 80vw;
    max-width: 400px;
  }
}

/* === RECORDINGS PAGE LAYOUT === */
.album-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-right: 5vw;      /* ✅ controls distance from right edge */
  padding-left: 5vw;       /* ✅ optional — adds space on left */
  margin-top: 0vh;
  position: relative;      /* ✅ allows fine tuning */
  right: 1.5vw;              /* 🔧 move left by increasing this value */
}

.album-art {
  position: relative;
  text-align: center;
}

.album-cover {
  width: 50vw;          /* ✅ size relative to screen width */
  max-width: 500px;
  border-radius: 10px;
  display: block;

  /* 🔧 Add these lines below to nudge the image */
  position: relative;   /* enables movement */
  top: -50px;           /* move UP (negative) or DOWN (positive) */
  left: -50px;           /* move RIGHT (positive) or LEFT (negative) */
}

.tracklist {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.tracklist li {
  margin: 10px 0;
}

.tracklist a {
  color: #7ef8e2;
  text-decoration: none;
  font-size: 1.1em;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.tracklist a:hover {
  color: #fff;
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}

.album-blurb {
  position: relative;        /* ✅ allows nudging in any direction */
  top: 0;                    /* positive = down, negative = up */
  left: 0;                   /* positive = right, negative = left */
  color: #f2f2f2;
  font-size: 1.1rem;
  line-height: 1.5;
  width: 25vw;
  margin-right: 2vw;
  text-align: left;
  transition: all 0.3s ease; /* ✅ smooth visual update when reloading */
}

.album-blurb strong {
  color: #7ef8e2;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
}

/* === AUDIO PLAYER LIST (Recordings Page) === */
.audio-player-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.audio-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.track-title {
  color: #7ef8e2;
  font-weight: bold;
  margin-bottom: 0.3rem;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.audio-track audio {
  width: 300px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.25);
}

/* === HOMEPAGE LINK ENHANCEMENT === */
.update-link {
  color: #b76cf8; /* ✅ richer purple tone */
  font-weight: 800; /* ✅ makes the text visually stronger */
  text-decoration: none;
  text-shadow:
    0 0 10px rgba(183, 108, 248, 0.7),
    0 0 20px rgba(128, 0, 255, 0.5);
  transition: all 0.3s ease-in-out;
}

.update-link:hover {
  color: #fff;
  text-shadow:
    0 0 18px rgba(183, 108, 248, 1),
    0 0 35px rgba(128, 0, 255, 0.8);
}

/* === BOFE FAMILY PARALLAX SCROLL EFFECT === */
.family-scroll {
  height: 200vh; /* two full screens for two sections */
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.family-section {
  position: relative;
  width: 100%;
  height: 100vh; /* each fills one screen */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.family-section.top {
  background-image: url("./images/PHOTO-2024-08-25-08-28-30.jpg");
  background-position: center 35%; /* ✅ moves image slightly down — adjust % as needed */
}

.family-section.bottom {
  background-image: url("./images/groupies.jpg");
  background-position: center 25%; /* ✅ moves image slightly down — adjust % as needed */
}

/* === BOFE FAMILY: Full-image dissolve transition === */

/* Container scroll zone */
.family-scroll {
  position: relative;
  height: 200vh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Both images stacked on top of each other */
.family-section {
  position: fixed;              /* ✅ ensures both images perfectly overlap */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;         /* ✅ prevents scroll hit detection flicker */
}

.family-section.top {
  background-image: url("./images/PHOTO-2024-08-25-08-28-30.jpg");
  z-index: 1;
  opacity: 1; /* starts visible */
}

.family-section.bottom {
  background-image: url("./images/groupies.jpg");
  z-index: o;
  opacity: 0; /* starts hidden */
}

/* Overlay text for each section */
.family-overlay {
  position: relative;
  top: 25vh; /* ✅ pushes text downward — adjust between 20vh–35vh to taste */
  background: rgba(0, 0, 0, 0.45);
  padding: 2rem 3rem;
  border-radius: 12px;
  text-align: center;
  max-width: 800px;
  color: #f2f2f2;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
  transition: top 0.3s ease; /* smooth movement if resized */
}

.family-overlay h2 {
  color: #7ef8e2;
  font-family: 'Rubik Mono One', sans-serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  margin-bottom: 1rem;
  text-shadow:
    0 0 10px rgba(0, 255, 255, 0.5),
    0 0 25px rgba(128, 0, 255, 0.4);
}

/* === Additional layout + transparency fixes === */
html {
  scroll-behavior: smooth;
}

.bofe-family-page header,
.bofe-family-page .hero-text {
  background: none !important;
  backdrop-filter: none !important;
}

body.bofe-family-page main {
  margin-top: 0;
  padding-top: 0;
}

body.bofe-family-page header {
  background: transparent !important;
}

/* === BOFE FAMILY: Seamless white-wash transition at image seam === */

/* Fade at the bottom of the first (top) image
.family-section.top::after {
  content: "";
  position: absolute;
  bottom: 0;              // anchors fade exactly at bottom edge 
  left: 0;
  width: 100%;
  height: 18vh;           // how tall the fade zone is 
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,     // fully transparent
    rgba(255, 255, 255, 0.25) 40%, // gentle white fade begins
    rgba(255, 255, 255, 0.5) 70%,  // stronger white at end
    rgba(255, 255, 255, 0.7) 100%  // soft bright washout at very edge
  );
  mix-blend-mode: screen; /* lightens instead of darkens
  pointer-events: none;
  z-index: 3;
}
*/

/* Optional: subtle soft fade at top of second (bottom) image
.family-section.bottom::before {
  content: "";
  position: absolute;
  top: 0;                /* anchors to top of second image
  left: 0;
  width: 100%;
  height: 15vh;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 40%,
    rgba(255, 255, 255, 0.5) 70%,
    rgba(255, 255, 255, 0.7) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}
*/

/* === HOME PAGE BLURB STYLING === */
.home-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh 5vw;          /* pushes text below hero section */
  min-height: 70vh;
  z-index: 5;                 /* ensures it sits above background */
  position: relative;
}

.home-blurb {
  max-width: 800px;
  background: rgba(0, 0, 0, 0.55);  /* subtle translucent backdrop for contrast */
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.25);
  line-height: 1.6;
  color: #f2f2f2;
}

.home-blurb p {
  margin-bottom: 1.5em;
}

.home-blurb a.update-link {
  display: inline-block;
  margin-top: 1em;
}

/* === FIX: ensure homepage blurb appears above background === */
body.home-page {
  position: relative;
  z-index: 0; /* baseline layer */
}

body.home-page main,
/* === HOMEPAGE BLURB STYLING === */
/* === HOMEPAGE BLURB: PURE TEXT, NO BOX === */
body.home-page .home-blurb {
  background: transparent !important;  /* ✅ ensures no overlay */
  border: none !important;             /* ✅ removes any ghost border */
  border-radius: 0 !important;         /* ✅ no rounded edges */
  box-shadow: none !important;         /* ✅ kills subtle shadow effects */
  padding: 0;                          /* ✅ no extra spacing box */
  color: #f2f2f2;                      /* text stays visible */
  z-index: 3;
  position: relative;
  margin-top: 15vh;                    /* move lower on page */
  width: 80%;                          /* keep text neatly within bounds */
  margin-left: auto;
  margin-right: auto;
  text-align: center;                  /* optional — makes it look cleaner */
}

/* --- HOMEPAGE BLURB VISIBILITY FIX --- */
.home-content,
.home-blurb {
  position: relative;
  z-index: 10; /* ✅ above background */
  color: #f2f2f2;
}

.home-blurb {
  max-width: 800px;
  margin: 4rem auto;
  padding: 2.5rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55); /* ✅ subtle contrast for readability */
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.25);
  line-height: 1.6;
}

/* === GLOWING TEXT STYLE (bold paragraph-scale glow) === */
.glow-text {
  color: #f2f2f2;
  font-family: inherit; /* ✅ matches surrounding text */
  font-size: inherit;   /* ✅ keeps paragraph size */
  font-weight: 700;     /* ✅ adds boldness */
  text-transform: none; /* ✅ normal capitalization */
  text-shadow:
    0 0 10px rgba(0, 255, 255, 0.4),
    0 0 20px rgba(0, 128, 255, 0.3),
    0 0 30px rgba(128, 0, 255, 0.3);
  animation: auroraGlow 12s ease-in-out infinite alternate;
}