:root{
  --bg:#0f1417;
  --bg-2:#131b1f;
  --panel:#172126;
  --panel-2:#1c2a30;
  --gold:#deb980;
  --gold-soft:#f0d9af;
  --cream:#f5efe4;
  --muted:#c7c5bd;
  --line:rgba(222,185,128,.22);
  --shadow:0 18px 60px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#10181c 35%, #0f1417);
  color:var(--cream);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.65;
}
a{color:inherit}
img{max-width:100%;display:block}
.site-header{
  max-width:1180px;
  margin:0 auto;
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
}
.brand{
  font-weight:850;
  letter-spacing:.08em;
  font-size:1.5rem;
  text-decoration:none;
  white-space:nowrap;
}
nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:18px;
}
nav a{
  text-decoration:none;
  color:#ece4d4;
  font-size:.98rem;
}
nav a:hover,.textlink:hover{color:var(--gold)}
.hero{
  padding:40px 24px 86px;
}
.home-hero{
  background:
    radial-gradient(circle at 25% 20%, rgba(222,185,128,.12), transparent 25%),
    radial-gradient(circle at 75% 25%, rgba(94,117,132,.18), transparent 30%),
    linear-gradient(145deg, #101519, #172126 55%, #121a1e);
}
.xmas{
  background:
    radial-gradient(circle at 50% 12%, rgba(104,121,67,.22), transparent 24%),
    radial-gradient(circle at 50% 90%, rgba(28,83,63,.22), transparent 35%),
    linear-gradient(180deg,#0d1715,#11201c 45%, #0d1715);
}
.xmas-hero{
  background:
    radial-gradient(circle at 50% 16%, rgba(232,200,134,.14), transparent 20%),
    radial-gradient(circle at 80% 32%, rgba(26,90,68,.18), transparent 28%),
    linear-gradient(160deg,#10201b,#0f1718 65%, #0d1715);
}
.hero-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:48px;
}
.hero-copy{
  max-width:640px;
}
.hero-visual{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.eyebrow{
  font-size:.78rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:760;
}
.logo,.cover-mark{width:160px;height:160px;object-fit:cover;border-radius:50%;margin:0 auto}
.feature-art{
  width:100%;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.art-frame{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:22px;
  padding:32px;
  box-shadow:var(--shadow);
}
.caption-card{
  background:rgba(18,27,32,.82);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
}
.caption-card strong{display:block;color:var(--gold-soft);margin-bottom:4px}
.caption-card span{color:var(--muted);font-size:.96rem}
h1,h2,h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:500;
  line-height:1.12;
  margin:0;
}
h1{font-size:clamp(2.8rem,7vw,5.8rem);margin:14px 0 18px}
h2{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:18px}
h3{font-size:1.6rem;margin-bottom:12px}
.lede{
  font-size:1.16rem;
  color:#e6dfd1;
  max-width:650px;
  margin:0 0 16px;
}
.scripture{
  font:italic 1.36rem Georgia,serif;
  color:#f0ddc0;
  margin:0 0 10px;
}
.star{font-size:3rem;color:var(--gold);line-height:1;margin-bottom:8px}
.buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
  justify-content:center;
}
.left-on-desktop{justify-content:flex-start}
.btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:4px;
  border:1px solid var(--gold);
  color:#171b1d;
  background:var(--gold);
  text-decoration:none;
  font-weight:760;
}
.btn.secondary{
  background:transparent;
  color:var(--cream);
}
.btn:hover{filter:brightness(1.08)}
main section{
  max-width:1180px;
  margin:0 auto;
  padding:78px 24px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.tile, .song-panel, .share-card, .story-section{
  background:rgba(22,31,36,.88);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.tile{padding:28px}
.tile p,.muted,.song-meta,.audio-note,#share-message,.story-section p{color:var(--muted)}
.textlink{text-decoration:none;color:var(--gold-soft);font-weight:700}
.wide{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.wide img{border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow)}
.quote{
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.quote p{
  max-width:780px;
  margin:0 auto 10px;
  font-family:Georgia,serif;
  font-size:clamp(1.45rem,3vw,1.95rem);
}
.listen-section{text-align:center}
.listen-block{text-align:center;padding-top:60px}
.song-panel{
  max-width:820px;
  margin:30px auto 0;
  padding:28px;
  background:rgba(16,31,27,.95);
}
.song-panel audio{
  width:100%;
  margin-top:14px;
}
.story-section,.share-card{
  max-width:900px;
  margin:0 auto;
  padding:34px;
  text-align:center;
}
.story-section p,.share-card p{max-width:760px;margin:0 auto 12px}
footer{
  padding:35px 24px;
  text-align:center;
  color:#a7a8a4;
  font-size:.85rem;
  border-top:1px solid rgba(255,255,255,.06);
}
@media (max-width: 900px){
  .hero-grid,.wide,.christmas-grid{grid-template-columns:1fr}
  .hero{padding-top:24px}
  .hero-copy{max-width:none;text-align:center}
  .left-on-desktop{justify-content:center}
  .hero-visual{order:0;max-width:640px;margin:0 auto}
  .grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .site-header{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding-bottom:10px;
  }
  nav{
    width:100%;
    justify-content:flex-start;
    gap:12px 18px;
  }
  nav a{font-size:.95rem}
  main section{padding:56px 22px}
  .art-frame{padding:24px}
  .story-section,.share-card,.song-panel,.tile{padding:24px}
}

/* P48 v3: Keep the artist identity and message ahead of decorative imagery on phones */
@media(max-width:720px){
  .hero{padding-top:30px;padding-bottom:58px}
  .hero-grid{gap:22px}
  .hero-copy h1{font-size:clamp(2.55rem,10vw,4rem);line-height:1.09}
  .hero-visual{width:100%;margin:0 auto}
  .feature-art{border-radius:12px}
  .site-header{gap:6px}
  nav{gap:10px 16px}
}

.christmas-cover{display:block;width:100%;height:auto;max-width:580px;margin:auto;border-radius:13px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.second-version{margin-top:22px;background:rgba(21,35,31,.86)}
@media(max-width:900px){.christmas-grid .hero-visual{order:0}.christmas-grid .hero-copy{order:0}}

/* Final launch additions */
.banner-container{max-width:1240px;margin:0 auto;padding:12px 24px 0}
.p48-banner{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:0 15px 38px rgba(0,0,0,.28)}
.home-hero{padding-top:36px}
.art-link{display:block}
.coming-soon{max-width:730px;margin:24px auto 0;color:var(--muted);font-size:.96rem;text-align:center}
@media(max-width:720px){.banner-container{padding:8px 12px 0}.p48-banner{border-radius:8px}.home-hero{padding-top:30px}.home-hero .hero-grid{gap:26px}.home-hero h1{font-size:clamp(2.65rem,10vw,4rem)}.christmas-grid .hero-visual{order:0}}