/* ============================================
   Design tokens — Brahma Muhurta (sacred dawn)
   ============================================ */
:root{
  --night:      #161A34;   /* pre-dawn indigo sky */
  --dawn-mid:   #3B3E7A;   /* rising dawn blue */
  --marigold:   #E8A33D;   /* marigold garland / saffron */
  --marigold-soft: #F0C87A;
  --vermillion: #A93B45;   /* kumkum / tilak red, used sparingly */
  --ivory:      #FBF7EE;   /* temple wall ivory */
  --sandal:     #D8C3A2;   /* sandalwood */
  --ink:        #211C14;   /* warm near-black text */
  --ink-soft:   #57503f;

  --font-display: 'Yatra One', serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-body:    'Karla', sans-serif;

  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ============ Layout helpers ============ */
.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }
section{ padding:88px 0; }
.eyebrow{
  font-family:var(--font-display);
  letter-spacing:.04em;
  color:var(--vermillion);
  font-size:0.95rem;
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--vermillion);
  display:inline-block;
}
h1,h2,h3{ font-family:var(--font-serif); font-weight:600; margin:0 0 .4em; color:var(--night); }
h1{ font-size:clamp(2.4rem,5vw,4rem); line-height:1.05; }
h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); }
h3{ font-size:1.35rem; }
p{ margin:0 0 1em; color:var(--ink-soft); }
.lede{ font-size:1.15rem; max-width:640px; }

/* ============ Nav ============ */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(251,247,238,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sandal);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:1080px; margin:0 auto;
}
.nav .brand{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--night);
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.nav .brand svg{ width:26px; height:26px; }
.nav ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
}
.nav a.navlink{
  text-decoration:none; color:var(--ink); font-size:.95rem;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.nav a.navlink:hover, .nav a.navlink.active{ border-bottom-color:var(--marigold); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; }

/* language toggle */
.lang-toggle{ display:flex; align-items:center; gap:2px; border:1px solid var(--sandal); border-radius:20px; padding:2px; margin-left:8px; }
.lang-btn{
  border:none; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:.78rem; padding:5px 12px; border-radius:18px;
  color:var(--ink-soft);
}
.lang-btn.active{ background:var(--marigold); color:var(--night); font-weight:700; }
@media (max-width:720px){ .lang-toggle{ order:2; } }

@media (max-width: 720px){
  .nav ul{
    position:fixed; inset:64px 0 auto 0; background:var(--ivory);
    flex-direction:column; gap:0; border-bottom:1px solid var(--sandal);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav ul.open{ max-height:320px; }
  .nav ul li{ border-top:1px solid var(--sandal); }
  .nav a.navlink{ display:block; padding:16px 28px; border-bottom:none; }
  .nav-toggle{ display:block; }
}

/* ============ Hero (dawn sky) ============ */
.hero{
  position:relative;
  padding:120px 0 100px;
  overflow:hidden;
  background:linear-gradient(180deg, var(--night) 0%, var(--dawn-mid) 55%, var(--marigold-soft) 100%);
  color:var(--ivory);
  text-align:center;
}
.hero .stars{ position:absolute; inset:0; opacity:.5; }
.hero-inner{ position:relative; z-index:2; }
.hero h1{ color:var(--ivory); }
.hero .lede{ color:#EFE9DA; margin:0 auto 36px; }

/* breathing Om — the signature element */
.om-wrap{
  width:150px; height:150px; margin:0 auto 34px;
  position:relative;
}
.om-wrap svg{
  width:100%; height:100%;
  animation: breathe 8s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(232,163,61,.55));
}
.om-wrap .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(232,163,61,.4);
  animation: ring 8s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(0.92); opacity:.85; }
  50%{ transform:scale(1.06); opacity:1; }
}
@keyframes ring{
  0%,100%{ transform:scale(1); opacity:.3; }
  50%{ transform:scale(1.18); opacity:0; }
}
.breath-label{
  font-family:var(--font-display);
  font-size:.85rem; letter-spacing:.08em;
  color:var(--marigold-soft);
  text-transform:uppercase;
}

.btn{
  display:inline-block; padding:14px 30px;
  background:var(--marigold); color:var(--night);
  text-decoration:none; border-radius:var(--radius);
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  letter-spacing:.02em;
  border:1px solid var(--marigold);
  transition:transform .2s ease, background .2s ease;
}
.btn:hover{ background:var(--marigold-soft); transform:translateY(-1px); }
.btn.ghost{
  background:transparent; color:var(--ivory); border:1px solid rgba(251,247,238,.5);
}
.btn.ghost:hover{ background:rgba(251,247,238,.1); }
.btn-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============ Time-of-day practice cards ============ */
.practice-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  background:var(--sandal); border:1px solid var(--sandal);
  margin-top:40px;
}
@media (max-width:720px){ .practice-grid{ grid-template-columns:1fr; } }
.practice-card{
  background:var(--ivory); padding:40px;
}
.practice-card .time{
  font-family:var(--font-display); color:var(--vermillion);
  font-size:.85rem; text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:10px; display:block;
}
.practice-card ul{ padding-left:18px; margin:16px 0; color:var(--ink-soft); }
.practice-card li{ margin-bottom:6px; }

/* ============ Mantra cards ============ */
.mantra-list{ display:grid; gap:1px; background:var(--sandal); border:1px solid var(--sandal); margin-top:40px; }
.mantra-card{ background:var(--ivory); padding:32px 40px; display:grid; grid-template-columns:220px 1fr; gap:28px; }
@media (max-width:720px){ .mantra-card{ grid-template-columns:1fr; gap:10px; } }
.mantra-card .m-name{ font-family:var(--font-serif); font-size:1.3rem; color:var(--night); }
.mantra-card .m-name small{ display:block; font-family:var(--font-body); color:var(--ink-soft); font-size:.8rem; margin-top:4px; }
.mantra-devanagari{ font-family:var(--font-serif); font-size:1.3rem; color:var(--night); margin-bottom:8px; }
.mantra-sanskrit{ font-family:var(--font-serif); font-size:1.05rem; color:var(--vermillion); font-style:italic; margin-bottom:6px; }
.mantra-meaning{ color:var(--ink-soft); font-size:.95rem; }

/* ============ Meditation timer widget ============ */
.med-widget{
  background:var(--night); color:var(--ivory);
  padding:56px 40px; text-align:center; margin-top:40px;
}
.med-widget .om-wrap{ width:120px; height:120px; }
.med-widget select, .med-widget button.timer-btn{
  font-family:var(--font-body); font-size:1rem; padding:10px 16px;
  border-radius:var(--radius); border:1px solid rgba(251,247,238,.4);
  background:transparent; color:var(--ivory); margin:6px;
}
.med-widget button.timer-btn{
  background:var(--marigold); color:var(--night); border-color:var(--marigold); font-weight:700; cursor:pointer;
}
.med-clock{ font-family:var(--font-serif); font-size:3rem; margin:18px 0; }
.med-status{ font-family:var(--font-display); letter-spacing:.05em; color:var(--marigold-soft); text-transform:uppercase; font-size:.85rem; min-height:1.4em; }

/* ============ Quote block ============ */
.quote-block{
  border-left:3px solid var(--marigold);
  padding-left:28px; margin:40px 0;
}
.quote-block p{ font-family:var(--font-serif); font-size:1.4rem; font-style:italic; color:var(--night); }
.quote-block cite{ font-style:normal; color:var(--ink-soft); font-size:.9rem; }

/* ============ About / bio ============ */
.about-grid{ display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; margin-top:24px; }
@media (max-width:720px){ .about-grid{ grid-template-columns:1fr; } }
.portrait{
  aspect-ratio:4/5; background:var(--sandal);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:.85rem; text-align:center; padding:20px;
  border:1px dashed var(--ink-soft);
}

/* ============ Gallery ============ */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:32px; }
@media (max-width:720px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
.gallery-grid .ph{
  aspect-ratio:1; background:var(--sandal); border:1px dashed var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--ink-soft); text-align:center; padding:10px;
}

/* ============ Section variants ============ */
.section-alt{ background:#F3ECDF; }

/* ============ Footer ============ */
footer.site{
  background:var(--night); color:var(--sandal);
  padding:56px 0 30px; text-align:center;
}
footer.site .brand{ font-family:var(--font-display); color:var(--marigold-soft); font-size:1.1rem; }
footer.site p{ color:#C9BFA6; font-size:.85rem; }
footer.site .blessing{ font-family:var(--font-serif); font-style:italic; color:var(--ivory); font-size:1.2rem; margin:18px 0; }

/* ============ Notice box for placeholders ============ */
.editor-note{
  background:#FFF7E6; border:1px solid var(--marigold); padding:14px 18px;
  font-size:.85rem; color:var(--ink-soft); margin-top:16px; border-radius:var(--radius);
}
.editor-note strong{ color:var(--vermillion); }