/* ════════════════════════════════════
   Headstone — Shared Styles
   ════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --rose:#d4a5a5;
  --rose-hover:#c48f8f;
  --rose-deep:#b87a7a;
  --lavender:#c4b5d0;
  --sage:#b5c4a9;
  --sky:#a8c4d8;
  --gold:#c9a84c;
  --gold-bright:#e0c068;
  --cream:#faf5ed;
  --warm-white:#fdf9f4;
  --text:#1a1520;
  --muted-text:#1a1520;
  --shadow:rgba(26,21,32,0.06);
}

html{scroll-behavior:smooth}

body{
  font-family:Georgia,'Times New Roman',serif;
  background:var(--cream);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.7
}

/* Fixed heaven background - actual element, not CSS voodoo */
#heaven-bg-page{
  position:fixed;inset:0;z-index:-2;
  background:url('/dashboard/courtney-bg/heaven-bg-4.png') center/cover;
  pointer-events:none
}
/* Light overlay so text stays readable */
#heaven-overlay{
  position:fixed;inset:0;z-index:-1;
  background:rgba(250,245,237,0.2);
  pointer-events:none
}

/* Content sections need a stacking context for readability */
.content,.cta-section,.expeditions,.mission,.demos-band,.join-section,.quote-section,.media-section{
  position:relative;
  z-index:1
}
.page-header{position:relative;z-index:10}

a{color:var(--rose);text-decoration:none;transition:color 0.2s}
a:hover{color:var(--rose-hover)}

/* ── Page Header / Breadcrumb ── */
.page-header{
  position:relative;z-index:10;
  background:rgba(255,255,255,0.06);backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(26,21,32,0.04);
  padding:20px 24px
}
.header-inner{
  max-width:860px;margin:0 auto;display:flex;align-items:center;gap:12px
}
.header-inner a{font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-text)}
.header-inner a:hover{color:var(--rose)}

/* ── Sub-page Hero ── */
.page-hero{
  position:relative;
  width:100vw;
  min-height:50vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center
}
#hero-bg,#hero-bg-next{
  position:absolute;inset:0;
  background-size:cover;background-position:center;z-index:0
}
#hero-bg-next{z-index:1;opacity:0;transition:opacity 2.5s ease-in-out}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(26,21,32,0.15) 0%,rgba(26,21,32,0.08) 40%,rgba(250,245,237,0.15) 70%,rgba(250,245,237,0.3) 100%);
  z-index:2
}
.hero-content{
  position:relative;z-index:3;
  padding:60px 28px 40px;max-width:700px
}
.hero-content .emoji{font-size:3rem;display:block;margin-bottom:10px}
.hero-content h1{
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:normal;
  color:var(--gold);
  text-shadow:0 3px 20px rgba(0,0,0,0.5);
  margin-bottom:10px;
  line-height:1.3
}
.hero-content p{
  font-size:1rem;
  color:rgba(224,192,104,0.85);
  max-width:600px;margin:0 auto;
  line-height:1.8;
  text-shadow:0 1px 10px rgba(0,0,0,0.25)
}

/* ── Content ── */
.content{max-width:720px;margin:0 auto;padding:24px 28px 60px}


h2{
  font-size:clamp(1.15rem,2.5vw,1.5rem);
  font-weight:normal;color:var(--text);
  margin-bottom:12px;margin-top:48px;
  line-height:1.35;padding-top:12px;
  border-top:2px solid rgba(212,165,165,0.15)
}
h2:first-of-type{margin-top:0;border-top:none;padding-top:0}

.content p{font-size:0.95rem;color:var(--text);line-height:1.9;margin-bottom:16px;text-shadow:0 1px 3px rgba(255,255,255,0.4)}

.content ul{padding-left:24px;margin-bottom:20px;list-style:none}
.content ul li{padding:6px 0;color:var(--text);font-size:0.92rem;line-height:1.7;text-shadow:0 1px 3px rgba(255,255,255,0.4)}
.content ul li::before{content:'✦ ';color:var(--rose);font-size:0.7rem}

/* ── Cards ── */
.info-card{
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;padding:20px;margin:20px 0;
}
.info-card h3{
  font-size:0.82rem;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--rose-deep);
  font-weight:normal;margin-bottom:8px
}
.info-card p{font-size:0.88rem;margin:0;color:var(--text)}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:28px}
.feat{border:none;padding:16px 0}
.feat h3{font-size:0.82rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--rose-deep);font-weight:normal;margin-bottom:6px}
.feat .e{font-size:1.5rem;display:block;margin-bottom:8px}
.feat p{font-size:0.83rem;margin:0;color:var(--text)}

/* ── CTA ── */
.cta-section{text-align:center;padding:40px 28px 60px;margin:20px 0}
.cta-section p{font-size:0.9rem;color:var(--text);margin-bottom:20px}

.btn{
  padding:13px 30px;border-radius:6px;
  font-family:Georgia,serif;font-size:0.85rem;
  letter-spacing:0.12em;text-transform:uppercase;
  cursor:pointer;display:inline-block;
  text-decoration:none;transition:all 0.25s ease;
  background:var(--rose);color:#fff;border:1px solid var(--rose)
}
.btn:hover{
  background:var(--rose-hover);border-color:var(--rose-hover);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,165,165,0.3)
}
.btn-secondary{
  background:transparent;color:var(--text);border:1px solid rgba(26,21,32,0.15)
}
.btn-secondary:hover{background:var(--gold);border-color:var(--gold);color:var(--text);box-shadow:none}

/* ── Footer ── */
footer{border-top:1px solid rgba(255,255,255,0.1);padding:28px 24px;text-align:center;backdrop-filter:blur(4px);background:rgba(255,255,255,0.06)}
footer .links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
footer .links a{font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text)}
footer .links a:hover{color:var(--rose)}
footer .copy{font-size:0.55rem;color:rgba(26,21,32,0.15);letter-spacing:0.1em}

/* ── Responsive ── */
@media(max-width:600px){
  .page-hero{min-height:40vh}
  .hero-content{padding:40px 20px 30px}
  .hero-content h1{font-size:clamp(1.4rem,5vw,2rem)}
  section{padding:40px 16px}
  .feature-grid{grid-template-columns:1fr}
}