:root{
  --bg:#0f0f11;
  --card:#121217;
  --muted:#bdbdc6;
  --accent:#ff80c0;
  --max-width:1100px;
  --radius:14px;
  --gap:18px;
  --ff: 'Poppins';
  --ff-title: 'Creepster', cursive, serif;
}
/* === Site Header, shared across all pages === */
.site-header {
  background: rgba(0, 0, 0, 0.6); /* transparent black panel */
  padding: 15px 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-logo {
  height: 60px;   /* keep logo same size everywhere */
  width: auto;
}

.nav a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;          /* consistent size */
  font-weight: 600;
  color: #fff;              /* white text */
  margin-left: 20px;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.nav a:hover {
  color: #a87bb7;           /* lavender hover */
}

.nav a.active {
  color: #ffaadf;           /* highlight current page */
}

/* Header logo styling */
header {
  text-align: center;
  padding: 20px;
}

.header-logo {
  max-width: 250px;
  height: auto;
  border-radius: 12px;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff);
  background:linear-gradient(180deg,#050508 0%, #0d0d0f 100%);
  color:#674a70;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

.wrap{max-width:var(--max-width);margin:0 auto;padding:28px}

.site-header{position:sticky;top:0;backdrop-filter: blur(6px);background:rgba(10,10,12,0.45);border-bottom:1px solid rgba(255,255,255,0.03)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;text-decoration:none;color:var(--accent);font-size:1.15rem}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.nav a:hover{color:var(--accent)}

.hero{padding:64px 0;background:linear-gradient(120deg, rgba(245,236,255,0.02), transparent);}
.hero-inner{display:flex;flex-direction:column;gap:8px}
.hero h1{margin:0;font-size:2.1rem}
.tagline{color:var(--muted);margin-bottom:12px}
.cta{display:inline-block;padding:10px 18px;border-radius:10px;background:var(--accent);color:#100; text-decoration:none;font-weight:600}
/* Special styling for index welcome section */
.index-welcome {
  background-color: rgba(255, 255, 255, 0.7); /* semi-transparent white */
  padding: 20px;
  border-radius: 12px;
  display: inline-block;   /* only as wide as the content */
  margin: 0 auto;          /* center */
  text-align: center;
}

/* Text inside */
.index-welcome h1 {
  font-family: 'Creepster', cursive;
  color: #674a70;          /* spooky accent color */
  margin-bottom: 10px;
}

.index-welcome p {
  font-family: 'Poppins', sans-serif;
  color: #222;             /* dark readable text */
  font-size: 1.1rem;
}

/* welcome image on index page */
.hero {
  text-align: center;
  margin: 40px auto;
}

.hero .welcome-image {
  max-width: 300px;   /* adjust size */
  height: auto;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;  /* optional */
  box-shadow: 2px 4px 8px rgba(0,0,0,0.3); /* optional */
}


.gallery-section h1 {
  text-align: center;
  font-family: 'Creepster', cursive;  /* spooky-cute font */
  font-size: 2.5rem;
  font-weight: bold;
  color: #ff80c0;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.gallery-section p {
  text-align: center;
  font-size: 1.1rem;   /* optional: adjust size */
  margin-top: 10px;    /* space from header */
}


.gallery-section h2{margin-top:6px}

.gallery-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}

.gallery-grid figure{
  margin:0;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:8px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
}
.gallery-grid figure:focus{outline:3px solid rgba(255,255,255,0.06)}
.gallery-grid figure:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,0.6)}
.gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:8px}
.gallery-grid figcaption{margin-top:8px;color:var(--muted);font-size:.95rem}

/* Gallery captions */
.gallery-section figcaption {
  color: #fff;               /* black text */
  font-family: 'Poppins', sans-serif;  /* match your body font */
  font-size: 0.95rem;        /* tweak size for readability */
  text-align: center;        /* center under each image */
  margin-top: 5px;
}

/* Gallery note color */
.gallery-note {
  text-align: center;
  font-size: 1.1rem;
  margin-top: 10px;
  color: #ffffff !important; /* 🎨 replace with whatever color you want */
  font-family: 'Poppins', sans-serif; /* make sure it matches your site text */
}


/* Lightbox */
.lightbox{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.8);z-index:2000;opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.lightbox[aria-hidden="false"]{opacity:1;pointer-events:auto}
.lb-content{max-width:92vw;max-height:86vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-content img{max-width:calc(100vw - 120px);max-height:78vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,0.7)}
.lb-close, .lb-prev, .lb-next{
  position:absolute;border:0;background:transparent;color:#fff;font-size:28px;padding:14px;cursor:pointer;
}
.lb-close{top:18px;right:18px;font-size:34px}
.lb-prev{left:14px}
.lb-next{right:14px}
/* Force lightbox text to black */
.lightbox .lb-data,
.lightbox .lb-caption,
.lightbox .lb-number {
  color: black !important;
#lb-caption{color:var(--muted);max-width:90vw;text-align:center}

}

/* Index page format */
.hero {
  text-align: center;
}
.social-links {
  text-align: center;
  margin-top: 1rem;
}
.social-links a {
  display: inline-block;
  margin: 0 0.5rem;
}


/* Footer */
.site-footer{padding:22px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03)}

/* Responsive tweaks */
@media (max-width:640px){
  .hero h1{font-size:1.6rem}
  .gallery-grid img{height:160px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}
/* Contact Section */
#contact {
  padding: 50px;
  text-align: center;
}

/*contact header bg */

.contact-title {
  background: rgba(255, 255, 255, 0.7); /* semi-transparent white */
  display: inline-block;               /* background hugs text */
  padding: 10px 20px;                  /* breathing space */
  border-radius: 8px;                  /* rounded edges */
  color: #674a70;                      /* custom font color (lavender example) */
}

/* Contact Header Color */
/* Style the "Leave a message" header only */
#contact h2 {
  color: #674a70;       /* change to any color you want */
  font-family: 'Creepster', cursive; /* or another font */
  text-align: center;   /* optional */
  font-size: 2rem;      /* adjust size if needed */
  margin-bottom: 20px;  /* spacing under header */
}
/*Contact info color */

.contact-form label {
  color: #ffffff; /* white */
}

/* Flexbox container */
.contact-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
  gap: 30px;
}
/* Request form Header align */
.wrap {
  text-align: center;
  background-color: transparent;
}
/* Request form page header with highlight */
.request-page h2 {
  text-align: center;
  color: #674a70;              /* text color */
  font-size: 1.8rem;
  margin: 20px auto;
  padding: 10px 20px;
  display: inline-block;       /* shrink highlight to text width */
  background-color: #f8e6ff;   /* soft pastel purple background */
  border-radius: 10px;         /* rounded edges */
  text-decoration: underline wavy #cc33ff; /* fun underline */
}
/* Request form page header with site fonts */
.request-page h2 {
  text-align: center;
  font-family: 'Creepster', cursive; /* match header font */
  color: #674a70;              /* text color */
  font-size: 2rem;             /* slightly larger for importance */
  margin: 20px auto;
  padding: 10px 20px;
  display: inline-block;
  background-color: #f8e6ff;   /* pastel highlight */
  border-radius: 10px;
  text-decoration: underline wavy #cc33ff; /* wavy underline */
}


/* Form styling */
#contact form {
  flex: 1;
  text-align: left;
}

#contact input,
#contact textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 2px solid #ff80c0;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
}

#contact button {
  background-color: #ff80c0;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}
#contact button:hover {
  background-color: #ff4da6;
}

/* Image ONLY in contact section */
#contact .contact-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#contact .contact-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(200, 150, 200, 0.3);
}

/* 📱 Mobile responsiveness */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
    align-items: center;
  }
  #contact .contact-image img {
    max-width: 70%;
    margin-top: 20px;
  }
}

/* Social Links Index Styling */
.social-links {
  text-align: center;   /* pushes the links to the right */
  margin: 20px;        /* adds spacing from the edges */
}

.social-links a {
  margin-left: 15px;   /* spacing between links */
  text-decoration: none;
  color: #333;         /* adjust color for your theme */
  font-weight: bold;
}

/* About Section Styling */
#about {
  background-color: #Transparent; /* shows website bg*/
  color: #4b3b47; /* dark pastel mauve for readability */
  padding: 50px;
  margin: 50px auto;
  max-width: 800px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(200, 150, 200, 0.3); /* pastel glow shadow */
}

/* Title */
#about h2 {
  text-align: center;
  color: #ff80c0; /* candy pink */
  font-size: 2.2em;
  font-family: 'Creepster', cursive; /* spooky-cute font */
  margin-bottom: 20px;
  text-shadow: 2px 2px #fff5f8; /* soft pastel glow */
}
/* About Artist Terms semi transparent bg title */

.about-title {
  background: rgba(255, 255, 255, 0.7); /* semi-transparent white */
  display: inline-block;                /* keeps background tight around text */
  padding: 10px 20px;
  border-radius: 8px;
  color: #a87bb7;                       /* lavender font color */
}
/* Body Text */
#about p {
  text-align: left;
  font-size: 1.1em;
  font-family: 'Poppins', sans-serif; /* clean readable font */
  line-height: 1.6;
  color: #4b3b47;
}

/* Centered pricing list */
.centered-list {
  padding-left: 0;
  margin-left: 0;
  text-align: center;
}

.centered-list li {
  display: block; /* default */
}

/* Request form styling-ish */

#Request Form h1 {
  text-align: center;
}

/* temp site bg */

body {
  background-image: url("images/Necrofillia.png"); /* put your image path here */
  background-size: cover;     /* makes it cover the whole page */
  background-repeat: no-repeat;
  background-attachment: fixed; /* keeps it in place while scrolling */
  background-position: center;
  margin: 0;
  font-family: Arial, sans-serif;
}
main {
  background-color: rgba(255, 255, 255, 0.85); /* white with transparency */
  padding: 20px;
  border-radius: 12px;
  max-width: 900px;
  margin: 20px auto;
}