/* ============================================================
   AFFIRMATION SONGS — The Sanctuary
   Brand: champagne gold, ivory, ocean turquoise. Calm. Premium.
   ============================================================ */

:root {
  --gold:        #C9A96E;
  --gold-deep:   #A87C3E;
  --ivory:       #F5F0E8;
  --cream:       #FAFAF8;
  --ink:         #1C1C1E;
  --ink-soft:    #4a4844;
  --turquoise:   #5BC4C0;
  --emerald:     #2D7A5E;
  --shadow:      0 12px 40px rgba(28, 28, 30, 0.10);
  --shadow-soft: 0 6px 24px rgba(28, 28, 30, 0.07);
  --radius:      16px;
  --radius-pill: 50px;
  --maxw:        1180px;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-padding-top: 88px; }

body {
  font-family: 'Josefin Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-weight: 300;
  overflow-x: hidden;
}

h1, h2, h3, .serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.2px;
}

.script {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 400;
}

section { position: relative; }

.section-pad { padding: clamp(64px, 11vw, 140px) 0; }

.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  font-weight: 400;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(201, 169, 110, 0.35);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(201, 169, 110, 0.5); }
.btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); transform: translateY(-3px); }
.btn-outline {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-deep);
}
.btn-outline:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); }
.btn-sm { padding: 11px 24px; font-size: 0.84rem; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(24px, 5vw, 60px);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), padding .4s;
}
.nav.scrolled {
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px rgba(28,28,30,0.06);
  padding: 12px clamp(24px, 5vw, 60px);
}
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.32rem;
  letter-spacing: 0.04em;
  color: #fff;
  transition: color .5s;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.nav.scrolled .nav-logo { color: var(--ink); text-shadow: none; }
.nav-logo span { color: #F4D79A; font-style: italic; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.nav.scrolled .nav-logo span { color: var(--gold-deep); text-shadow: none; }
.nav-links { display: flex; gap: 34px; align-items: center; list-style: none; }
.nav-links a {
  font-size: 0.9rem; letter-spacing: 0.05em; color: #fff;
  position: relative; transition: color .5s; opacity: .92;
}
.nav.scrolled .nav-links a { color: var(--ink); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 0;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
.nav-cta { padding: 9px 22px !important; }
.nav.scrolled .nav-cta { border-color: var(--gold); color: var(--gold-deep); }

.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; }
.burger span { width: 26px; height: 2px; background: #fff; transition: .4s var(--ease); }
.nav.scrolled .burger span { background: var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,28,30,0.28) 0%, rgba(28,28,30,0.10) 40%, rgba(28,28,30,0.45) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 820px; padding: 0 24px; }
.hero .eyebrow { color: rgba(255,255,255,0.9); margin-bottom: 22px; display: inline-block; }
.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  text-shadow: 0 2px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.4);
  margin-bottom: 22px;
}
.hero h1 em {
  font-style: italic;
  color: #F4D79A;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5);
}
.hero-sub {
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  font-weight: 300; max-width: 580px; margin: 0 auto 38px;
  text-shadow: 0 1px 14px rgba(0,0,0,0.35); opacity: .96;
}
.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,0.85); font-size: 0.82rem; letter-spacing: 0.18em;
  text-transform: uppercase; animation: float 2.6s ease-in-out infinite;
}
@keyframes float { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(9px);} }

/* ============================================================
   DAILY AFFIRMATION
   ============================================================ */
.daily {
  background: linear-gradient(135deg, var(--ivory) 0%, #efe6d6 100%);
  text-align: center; overflow: hidden;
}
.daily::before {
  content: '✦'; position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  color: var(--gold); font-size: 1.4rem; opacity: .6; z-index: 2;
}
/* floating gold sparkles + butterflies */
.daily-sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.daily-sparkles .sp {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #f4dca0 0%, rgba(201,169,110,0.5) 60%, transparent 70%);
  box-shadow: 0 0 10px 2px rgba(201,169,110,0.5);
  opacity: 0; animation: twinkle 6s ease-in-out infinite;
}
.daily-sparkles .s1 { top: 18%; left: 12%; animation-delay: 0s; }
.daily-sparkles .s2 { top: 30%; left: 82%; animation-delay: 1.2s; }
.daily-sparkles .s3 { top: 62%; left: 8%;  animation-delay: 2.1s; }
.daily-sparkles .s4 { top: 72%; left: 90%; animation-delay: .6s; }
.daily-sparkles .s5 { top: 45%; left: 22%; animation-delay: 3.2s; width:4px;height:4px; }
.daily-sparkles .s6 { top: 25%; left: 60%; animation-delay: 2.6s; width:4px;height:4px; }
.daily-sparkles .s7 { top: 80%; left: 40%; animation-delay: 4s; }
.daily-sparkles .s8 { top: 14%; left: 70%; animation-delay: 1.8s; width:5px;height:5px; }
@keyframes twinkle { 0%,100%{opacity:0;transform:scale(.5);} 50%{opacity:1;transform:scale(1);} }
.daily-butterfly { position: absolute; font-size: 1.5rem; opacity: .5; filter: saturate(.85); animation: flutter 9s ease-in-out infinite; }
.daily-butterfly.bf1 { top: 22%; left: 6%; animation-delay: 0s; }
.daily-butterfly.bf2 { top: 68%; right: 7%; left: auto; animation-delay: 3s; }
@keyframes flutter { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-18px) rotate(6deg);} }
@media (prefers-reduced-motion: reduce) { .daily-sparkles .sp, .daily-butterfly { animation: none; opacity:.5; } }
.daily .wrap { position: relative; z-index: 2; }
.daily .eyebrow { margin-bottom: 26px; display: block; }
.daily-quote {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 3.1rem); color: var(--ink);
  max-width: 900px; margin: 0 auto 14px; line-height: 1.28;
}
.daily-date { font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 36px; }
.daily-song { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.daily-song-label { font-size: 0.92rem; color: var(--ink-soft); }
.daily-song-label b { font-weight: 400; font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--gold-deep); }
.daily-return { max-width: 540px; margin: 30px auto 0; font-size: 0.92rem; color: var(--ink-soft); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; }

/* ============================================================
   MOOD SELECTOR
   ============================================================ */
.mood { background: var(--cream); text-align: center; }
.section-head { max-width: 640px; margin: 0 auto 18px; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 14px 0 16px; }
@media (min-width: 600px) { .mood .section-head h2 { white-space: nowrap; } }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

.mood-q { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.4rem,3vw,2rem); color: var(--gold-deep); margin-bottom: 30px; }
.mood-chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  padding: 12px 26px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(168,124,62,0.35); background: #fff;
  font-family: 'Josefin Sans', sans-serif; font-size: 0.9rem; letter-spacing: 0.04em;
  cursor: pointer; color: var(--ink-soft); transition: all .35s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.chip.active { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 8px 20px rgba(201,169,110,0.35); }

/* ============================================================
   SONG GRID
   ============================================================ */
.song-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 26px; margin-top: 50px;
}
.song-card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display: flex; flex-direction: column; text-align: left;
}
.song-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.song-card-art { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.song-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.song-card:hover .song-card-art img { transform: scale(1.06); }
.song-card-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(28,28,30,0.30); opacity: 0; transition: opacity .4s;
}
.song-card:hover .song-card-play { opacity: 1; }
.song-card-play span {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--ink);
  padding-left: 4px;
}
.song-card-body { padding: 18px 18px 22px; }
.song-card-body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.tag {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-deep); border: 1px solid rgba(168,124,62,0.4); border-radius: var(--radius-pill);
  padding: 3px 11px;
}
.song-card.hide { display: none; }

/* ---------- Playlists ---------- */
.playlists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 50px; }
.pl-card {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 34px;
  color: #fff; box-shadow: var(--shadow-soft);
}
.pl-card { min-height: 320px; color: #fff; }
.pl-card::before { content:''; position:absolute; inset:0; z-index:0; background-size: cover; background-position: center; transition: transform 1s var(--ease); }
.pl-card::after { content:''; position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(20,20,22,0.05) 0%, rgba(20,20,22,0.15) 45%, rgba(20,20,22,0.72) 100%); }
.pl-morning::before { background-image: url('../assets/banners/pl-morning.jpg'); }
.pl-night::before   { background-image: url('../assets/banners/pl-night.jpg'); }
.pl-card:hover::before { transform: scale(1.06); }
.pl-card > * { position: relative; z-index: 1; }
.pl-card h3 { font-size: 1.85rem; margin-bottom: 8px; text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
.pl-card p { font-weight: 300; margin-bottom: 20px; text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.pl-cta { align-self: flex-start; padding: 12px 26px; font-size: 0.85rem; border-radius: var(--radius-pill); font-family:'Josefin Sans',sans-serif; letter-spacing:.04em; background: rgba(255,255,255,0.95); color: var(--ink); transition: transform .35s var(--ease), background .3s; }
.pl-card:hover .pl-cta { transform: translateX(3px); background: #fff; }

/* ============================================================
   THE WORLD
   ============================================================ */
.world { background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%); }
.world-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px;
}
.world-card {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5;
  box-shadow: var(--shadow-soft);
}
.world-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.world-card:hover img { transform: scale(1.08); }
.world-card::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 35%, rgba(28,28,30,0.7) 100%);
}
.world-card-txt { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; z-index: 2; color: #fff; }
.world-card-txt h3 { font-size: 1.18rem; margin-bottom: 4px; }
.world-card-txt p { font-size: 0.82rem; font-style: italic; font-family: 'Cormorant Garamond', serif; opacity: .92; }
.world-card { cursor: pointer; }
.world-explore {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: rgba(255,255,255,0.92); color: var(--ink); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 6px 13px; border-radius: var(--radius-pill);
  opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.world-card:hover .world-explore, .world-card:focus-visible .world-explore { opacity: 1; transform: none; }
.world-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; }
.lightbox-overlay { position: absolute; inset: 0; background: rgba(20,20,22,0.78); backdrop-filter: blur(6px); animation: fade .3s ease; }
.lightbox-inner {
  position: relative; z-index: 1; max-width: 1000px; width: 100%; max-height: 90vh; overflow: hidden;
  background: var(--cream); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; animation: pop .4s var(--ease);
}
/* Fixed 3:4 frame so every world image renders at the same size,
   regardless of the source aspect ratio (wide or tall). */
.lightbox-img { overflow: hidden; aspect-ratio: 4 / 5; }
.lightbox-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-text { padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
.lightbox-text .eyebrow { margin-bottom: 12px; }
.lightbox-text h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 16px; }
.lightbox-text p { color: var(--ink-soft); font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; line-height: 1.7; font-style: italic; }
.lightbox-close {
  position: absolute; top: 14px; right: 18px; z-index: 4; background: rgba(255,255,255,0.9);
  border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--ink); transition: transform .3s, background .3s;
}
.lightbox-close:hover { transform: rotate(90deg); background: #fff; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .lightbox-inner { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .lightbox-img img { max-height: 46vh; }
  .lightbox-text { padding: 28px 26px; }
}

/* ============================================================
   STORE (COMING SOON)
   ============================================================ */
.store { position: relative; overflow: hidden; text-align: center; padding: clamp(72px, 11vw, 130px) 0; color: #fff; }
.store { background: linear-gradient(165deg, #FCF6EA 0%, #F6E7CC 48%, #F1DABF 100%); color: var(--ink); }
.store::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 80% 12%, rgba(201,169,110,0.30), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(232,197,127,0.26), transparent 44%); }
.store-overlay { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.store-overlay::before, .store-overlay::after { content:'🦋'; position:absolute; font-size:1.6rem; opacity:.4; }
.store-overlay::before { top:16%; left:8%; animation: drift-a 20s ease-in-out infinite; }
.store-overlay::after  { top:24%; right:9%; font-size:1.3rem; opacity:.32; animation: drift-b 24s ease-in-out infinite; }
.store .wrap { position: relative; z-index: 2; }
.store .soon-badge { display:inline-block; background: var(--ink); color: var(--ivory); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 18px; border-radius: var(--radius-pill); margin-bottom: 22px; }
.store .eyebrow { color: var(--gold-deep); display:block; margin-bottom: 12px; }
.store h2 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); color: var(--ink); margin-bottom: 16px; }
.store-lead { max-width: 600px; margin: 0 auto 50px; color: var(--ink-soft); font-size: 1.1rem; }

/* pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 auto 30px; max-width: 980px; align-items: stretch; text-align: left; }
.tier { background: rgba(255,255,255,0.97); border-radius: 18px; padding: 32px 26px; color: var(--ink); display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .4s var(--ease); }
.tier:hover { transform: translateY(-5px); }
.tier-featured { position: relative; border: 2px solid var(--gold); }
@media (min-width: 880px) { .tier-featured { transform: scale(1.05); } .tier-featured:hover { transform: scale(1.05) translateY(-5px); } }
.tier-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--ink); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--radius-pill); white-space: nowrap; }
.tier-name { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); }
.tier-price { font-family: 'Playfair Display', serif; font-size: 2.6rem; color: var(--ink); margin: 6px 0 2px; }
.tier-price s { color: var(--ink-soft); opacity: .5; font-size: 0.45em; margin-right: 6px; }
.tier-note { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--ink-soft); }
.tier ul { list-style: none; margin: 20px 0 26px; padding: 0; }
.tier li { position: relative; padding-left: 24px; margin-bottom: 11px; font-size: 0.95rem; color: var(--ink-soft); }
.tier li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); }
.tier .btn { margin-top: auto; width: 100%; justify-content: center; }
.store-foot { color: var(--ink-soft); font-size: 0.9rem; }
.store-foot span { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold-deep); font-size: 1.05rem; }

/* song page: also-on line */
.also-on { margin-top: 16px; font-size: 0.9rem; color: var(--ink-soft); }
.also-on a { color: var(--gold-deep); border-bottom: 1px solid rgba(168,124,62,0.4); }
.also-on a:hover { color: var(--ink); }

@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; max-width: 420px; } }

/* ============================================================
   SUPPORT
   ============================================================ */
.support { position: relative; overflow: hidden; text-align: center; padding: clamp(60px, 9vw, 100px) 0;
  background: linear-gradient(135deg, #FBF3E4 0%, #F3E5CB 55%, #EEDBBB 100%); color: var(--ink); }
.support::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:
    radial-gradient(circle at 82% 18%, rgba(201,169,110,0.22), transparent 44%),
    radial-gradient(circle at 14% 86%, rgba(232,197,127,0.20), transparent 42%); }
.support .wrap { position: relative; z-index: 1; }
.support-bf { position: absolute; font-size: 1.7rem; opacity: .45; z-index: 1; will-change: transform; }
.support-bf.bf-a { top: 20%; left: 7%;  animation: drift-a 18s ease-in-out infinite; }
.support-bf.bf-b { top: 30%; right: 9%; left: auto; font-size: 1.4rem; opacity: .38; animation: drift-b 22s ease-in-out infinite; }
.support-bf.bf-c { bottom: 18%; left: 16%; font-size: 1.2rem; opacity: .32; animation: drift-c 26s ease-in-out infinite; }
@keyframes drift-a {
  0%   { transform: translate(0,0) rotate(-6deg); }
  20%  { transform: translate(60px,-34px) rotate(8deg); }
  45%  { transform: translate(120px,12px) rotate(-4deg); }
  65%  { transform: translate(70px,40px) rotate(10deg); }
  85%  { transform: translate(20px,-16px) rotate(-8deg); }
  100% { transform: translate(0,0) rotate(-6deg); }
}
@keyframes drift-b {
  0%   { transform: translate(0,0) rotate(5deg); }
  25%  { transform: translate(-70px,28px) rotate(-7deg); }
  50%  { transform: translate(-130px,-20px) rotate(6deg); }
  75%  { transform: translate(-50px,-44px) rotate(-5deg); }
  100% { transform: translate(0,0) rotate(5deg); }
}
@keyframes drift-c {
  0%   { transform: translate(0,0) rotate(-3deg); }
  30%  { transform: translate(80px,-26px) rotate(9deg); }
  60%  { transform: translate(160px,16px) rotate(-6deg); }
  100% { transform: translate(0,0) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .support-bf { animation: none !important; } }
.support .eyebrow { color: var(--gold-deep); display: block; margin-bottom: 16px; }
.support h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--ink); max-width: 680px; margin: 0 auto 18px; line-height: 1.25; }
.support p { max-width: 560px; margin: 0 auto 24px; color: var(--ink-soft); font-size: 1.06rem; }
.support-grat { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem; color: var(--gold-deep); margin-bottom: 30px !important; }
/* support upgrades: banner, mission progress, social proof */
.support-banner { max-width: 760px; margin: 0 auto 40px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.support-banner img { width: 100%; height: clamp(150px, 24vw, 230px); object-fit: cover; display: block; }
.support h3 { margin: 14px auto 22px; }
.support p { max-width: 480px; color: #3a3833; }
.support-mission { max-width: 480px; margin: 6px auto 30px; }
.support-mission-label { font-size: 0.92rem !important; color: var(--ink) !important; margin-bottom: 12px !important; font-weight: 500; }
.support-bar { height: 12px; border-radius: var(--radius-pill); background: rgba(28,28,30,0.10); overflow: hidden; }
.support-bar span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(135deg, #E8C57F 0%, #C9A96E 100%); }
.support-bar-count { font-size: 0.86rem !important; color: var(--ink-soft); margin: 10px auto 0 !important; letter-spacing: 0.04em; }
.support-proof { font-size: 0.9rem !important; color: var(--ink-soft); margin-top: 18px !important; max-width: 460px; opacity: .9; }

/* ============================================================
   THE STORY
   ============================================================ */
.story { background: var(--cream); }
.story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.story-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/5; }
.story-img img { width: 100%; height: 100%; object-fit: cover; }
.story-txt h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0 26px; }
.story-txt p { color: var(--ink-soft); margin-bottom: 18px; font-size: 1.06rem; }
.story-txt p.lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; color: var(--ink); }

/* ============================================================
   JOIN (email)
   ============================================================ */
.join {
  background: linear-gradient(160deg, #EDF7F5 0%, #CFE7E4 48%, #A6D4CF 100%);
  color: var(--ink); text-align: center; position: relative; overflow: hidden;
}
.join::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:
    radial-gradient(circle at 80% 14%, rgba(201,169,110,0.20), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(91,196,192,0.22), transparent 42%); }
.join .wrap { position: relative; z-index: 1; }
.join .eyebrow { color: var(--gold-deep) !important; opacity: 1 !important; }
.join h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 12px 0 14px; color: var(--ink); }
.join > .wrap > p { max-width: 520px; margin: 0 auto 34px; font-size: 1.08rem; color: var(--ink-soft); }
.join-form {
  display: flex; gap: 12px; max-width: 560px; margin: 0 auto; flex-wrap: wrap; justify-content: center;
}
.join-form input {
  flex: 1; min-width: 180px; padding: 16px 22px; border-radius: var(--radius-pill);
  border: none; font-family: 'Josefin Sans', sans-serif; font-size: 0.95rem;
  background: rgba(255,255,255,0.96); color: var(--ink);
}
.join-form input:focus { outline: 2px solid var(--ink); }
.join-form button {
  background: linear-gradient(135deg, #E8C57F 0%, #C9A96E 100%); color: var(--ink); border: none; padding: 16px 36px;
  border-radius: var(--radius-pill); cursor: pointer; font-family: 'Josefin Sans', sans-serif;
  font-size: 0.95rem; letter-spacing: 0.05em; transition: transform .4s var(--ease), box-shadow .3s;
  box-shadow: 0 8px 22px rgba(201,169,110,0.35);
}
.join-form button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,169,110,0.55); }
.join-fine { margin-top: 20px; font-size: 0.84rem; opacity: .8; color: var(--ink-soft); }
.join-success { margin-top: 22px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.5rem; display: none; color: #E8C57F; }
.join-success.show { display: block; }

/* ---------- Welcome ribbon (clarity line + free-gift signup) ---------- */
.welcome { position: relative; overflow: hidden; padding: clamp(54px, 9vw, 110px) 0; text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%); }
.welcome::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(250,250,248,0.85) 0%, rgba(245,240,232,0.92) 100%),
    url('../assets/banners/loc-lotus-bay.jpg') center/cover no-repeat;
}
.welcome > .wrap { position: relative; z-index: 1; }
.welcome-bf { position: absolute; z-index: 0; pointer-events: none; font-size: 1.6rem; opacity: .42; }
.welcome-bf.wb-a { top: 14%; left: 7%; animation: drift-a 20s ease-in-out infinite; }
.welcome-bf.wb-b { top: 20%; right: 9%; animation: drift-b 24s ease-in-out infinite; }
.welcome-bf.wb-c { bottom: 12%; left: 15%; font-size: 1.3rem; opacity: .32; animation: drift-c 26s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .welcome-bf { animation: none !important; } }
.welcome-what {
  max-width: 640px; margin: 0 auto clamp(38px, 6vw, 60px);
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.72rem); line-height: 1.5; color: var(--ink-soft);
}
.welcome-gift {
  max-width: 680px; margin: 0 auto; background: #fff;
  border: 1px solid rgba(201,169,110,0.28); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(32px, 5vw, 52px) clamp(22px, 5vw, 48px);
}
.welcome-gift .eyebrow { color: var(--gold-deep); opacity: 1; }
.welcome-gift h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 10px 0 12px; color: var(--ink); }
.welcome-gift > p { max-width: 500px; margin: 0 auto 28px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }
.welcome-gift .join-form input { background: var(--cream); border: 1px solid rgba(28,28,30,0.12); }
.welcome-gift .join-success { color: var(--gold-deep); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: linear-gradient(180deg, #1f5450 0%, #143d3a 100%); color: var(--ivory); padding: 70px 0 36px; text-align: center; }
.footer-logo { width: 84px; margin: 0 auto 22px; border-radius: 50%; }
.footer-wordmark { font-family: 'Playfair Display', serif; font-size: 1.7rem; letter-spacing: 0.04em; margin-bottom: 20px; color: #fff; }
.footer-wordmark span { color: #E8C57F; font-style: italic; }
.footer-quote {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.2rem,2.4vw,1.6rem);
  max-width: 720px; margin: 0 auto 36px; color: #fff; opacity: .92; text-wrap: balance; line-height: 1.5;
}
.footer-quote .fq-home { display: inline-block; margin-top: 10px; color: var(--gold); font-size: 1.15em; }
.footer-social { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.footer-social a { font-size: 0.88rem; letter-spacing: 0.06em; opacity: .8; transition: opacity .3s, color .3s; }
.footer-social a:hover { opacity: 1; color: var(--gold); }
.footer-copy { font-size: 0.78rem; opacity: .5; letter-spacing: 0.06em; }
.footer-copy span { color: var(--gold); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   SONG PAGE
   ============================================================ */
.song-hero { padding: 130px 0 60px; background: linear-gradient(180deg, var(--ivory), var(--cream)); }
.song-hero-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.song-hero-art { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 1/1; }
.song-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.song-hero-info h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 14px 0 18px; }
.song-hero-info .desc { color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 28px; }
.song-platforms { display: flex; gap: 12px; flex-wrap: wrap; }
.song-section { padding: 60px 0; }
.song-section h2 { font-size: 1.8rem; margin-bottom: 24px; text-align: center; }
.embed-box { max-width: 820px; margin: 0 auto 20px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); }
.embed-box iframe { width: 100%; display: block; border: 0; }
.lyrics { max-width: 680px; margin: 0 auto; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; line-height: 2; color: var(--ink); white-space: pre-line; }
.back-home { text-align: center; padding: 40px 0 80px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; right: 16px;
    background: rgba(250,250,248,0.98); backdrop-filter: blur(14px); padding: 22px 30px;
    border-radius: 16px; box-shadow: var(--shadow); gap: 20px;
  }
  .nav-links.open a { color: var(--ink); }
  .world-grid { grid-template-columns: repeat(2, 1fr); }
  .story-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-img { aspect-ratio: 16/10; max-height: 360px; }
  .song-hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .song-hero-art { max-width: 360px; margin: 0 auto; }
  .song-platforms { justify-content: center; }
  .playlists { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .world-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .song-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .song-card-body { padding: 14px; }
  .song-card-body h3 { font-size: 0.98rem; }
}

/* ---------- Follow block (bottom, compact) ---------- */
.follow { text-align: center; padding: clamp(50px, 8vw, 90px) 0; background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%); }
.follow .eyebrow { color: var(--gold-deep); display: block; margin-bottom: 14px; }
.follow h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 10px; color: var(--ink); }
.follow p { max-width: 440px; margin: 0 auto 26px; color: var(--ink-soft); font-size: 1.04rem; }
.follow-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Welcome popup (once per visitor) ---------- */
.popup { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.popup.open { display: flex; }
.popup-overlay { position: absolute; inset: 0; background: rgba(20,20,22,0.72); backdrop-filter: blur(6px); animation: fade .3s ease; }
.popup-card {
  position: relative; z-index: 1; width: 100%; max-width: 460px; text-align: center;
  background: #fff; border: 1px solid rgba(201,169,110,0.3); border-radius: var(--radius);
  padding: clamp(34px, 6vw, 48px) clamp(24px, 5vw, 40px); box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  animation: pop .4s var(--ease);
}
.popup-card .eyebrow { color: var(--gold-deep); display: block; margin-bottom: 12px; }
.popup-card h3 { font-family: 'Playfair Display', serif; font-weight: 500; font-size: clamp(1.5rem, 4vw, 2rem); color: var(--ink); margin-bottom: 14px; line-height: 1.2; }
.popup-card > p { max-width: 380px; margin: 0 auto 24px; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.popup-card .join-form input { background: var(--cream); border: 1px solid rgba(28,28,30,0.12); }
.popup-card .join-success { color: var(--gold-deep); }
.popup-close {
  position: absolute; top: 12px; right: 16px; z-index: 2; background: rgba(28,28,30,0.06);
  border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  cursor: pointer; color: var(--ink); transition: transform .3s, background .3s;
}
.popup-close:hover { transform: rotate(90deg); background: rgba(28,28,30,0.12); }