:root{
  --bg0:#050608;
  --bg1:#070f0b;

  --ink: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.90);

  --accent: rgba(200,255,220,.88);
  --glass: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.18);

  --shadow: rgba(0,0,0,.80);
  --btnText: rgba(10,18,12,.95);
}

/* RESET */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background: linear-gradient(180deg, var(--pageBg1, var(--bg1)), var(--pageBg0, var(--bg0)));
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

/* GRAIN */
.grain{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity: var(--grainOpacity, .12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* HEADER */
header.top{
  position:sticky;
  top:0;
  z-index:20;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, var(--headerBgA, rgba(5,6,8,.88)), var(--headerBgB, rgba(5,6,8,.40)));
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Home icon button (top-left) */
.homeIcon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.homeIcon:hover{ transform: translateY(-1px); filter: brightness(1.05); background: rgba(255,255,255,.10); }
.homeIcon svg{ width:22px; height:22px; opacity:.95; }

/* Optional sound toggle pill (right side) */
.soundToggle{
  font-weight:900;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
body.day .soundToggle{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.10);
}

.brand{
  font-family: Cinzel, serif;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}

.progress{
  font-size:12px;
  letter-spacing:.12em;
  opacity:.78;
}

.nav a{
  font-weight:900;
  font-size:13px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}

/* SECTIONS */
.section{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:90px 18px 70px;
}

.wrap{
  width:min(1100px,100%);
  margin:0 auto;
}

/* SPLIT EDITORIAL */
.section.split .wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items:center;
}

.section.split .story{
  max-width: 560px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.14);
}

.section.split.left .story{ grid-column:1; }
.section.split.right .story{ grid-column:2; }

@media (max-width: 900px){
  .section.split .wrap{ grid-template-columns:1fr; }
  .section.split .story{ grid-column:1; }
}

/* TYPOGRAPHY */
.kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:900;
  color: rgba(255,255,255,.88);
  margin-bottom:10px;
}

.h1{
  font-family: Inter, system-ui;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1.03;
  margin:0 0 12px;
  font-size:clamp(36px,5.2vw,74px);
  color: var(--ink);
  text-shadow:0 22px 70px var(--shadow);
}

.lead{
  max-width:72ch;
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.85;
  color: var(--muted);
  text-shadow:0 18px 60px var(--shadow);
}
.lead + .lead{ margin-top:10px; }

/* CARDS */
.card{
  margin-top:22px;
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.16);
  background:var(--glass);
  backdrop-filter:blur(14px);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}

/* BUTTONS — ONE SYSTEM */
.btn,
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding: 12px 20px;
  border-radius:16px;
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
  color: var(--btnText);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(200,255,220,.60));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  transition: transform .15s ease, filter .15s ease;
}

.btn:hover,
.cta:hover{ transform:translateY(-1px); filter:brightness(1.05); }

.btn:active,
.cta:active{ transform:translateY(0); }

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.in{ opacity:1; transform:none; }

/* Consistent spacing between content and buttons across pages */
.story .btn,
.story .cta{
  margin-top: 22px;
}

.card + .btn,
.card + .cta{
  margin-top: 22px;
}

.heroImg .grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Ayurveda page: keep the main card editorial-sized like other pages */
.ayurveda .card{
  max-width: 560px;
}

/* Ayurveda page: prevent 2-col grid from forcing a wider card */
.ayurveda .grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}


/* ---------- DAY THEME ---------- */
body.day{
  --ink: rgba(32,45,38,.92);        /* dark herbal */
  --muted: rgba(32,45,38,.72);
  --shadow: rgba(255,255,255,.55);
}

body.day .h1,
body.day .kicker,
body.day .lead{
  text-shadow: 0 6px 24px rgba(255,255,255,.45);
}

body.day header.top{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.75),
    rgba(255,255,255,.35)
  );
  border-bottom: 1px solid rgba(0,0,0,.08);
}

body.day .nav a{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.10);
}

.siteFooter{
  margin-top: 120px;
  padding: 40px 18px 60px;
  text-align: center;
  font-family: Inter, system-ui;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.siteFooter .footerInner{
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.siteFooter a{
  color: inherit;
  opacity: .85;
}

.siteFooter a:hover{
  opacity: 1;
}