/* =====================================================================
   PRATIKRAMAN — A School of Consciousness
   Design system: "Sacred Editorial" — quiet luxury, warm parchment,
   walnut-black depths, gold hairlines, saffron invitation.
   ===================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Tiro+Devanagari+Hindi:ital@0;1&display=swap');

/* ---------- Tokens ---------- */
:root{
  --paper:#F3E9D2;
  --paper-2:#ECDFC1;
  --paper-3:#E4D3AC;
  --ink:#2A1C0E;
  --ink-soft:#6B5536;
  --ink-faint:#9A8358;
  --night:#191006;
  --night-2:#241708;
  --night-3:#33210E;
  --gold:#B8901F;
  --gold-bright:#DBB044;
  --gold-pale:#E8D6A0;
  --saffron:#C2611A;
  --saffron-deep:#A24A0C;
  --cream-text:#F1E6CC;
  --line:rgba(42,28,14,.16);
  --line-strong:rgba(42,28,14,.32);
  --line-gold:rgba(184,144,31,.34);
  --shadow-soft:0 30px 60px -30px rgba(25,16,6,.45);
  --shadow-card:0 24px 50px -28px rgba(25,16,6,.55);
  --serif:'Cormorant Garamond',serif;
  --body:'Spectral',Georgia,serif;
  --deva:'Tiro Devanagari Hindi','Cormorant Garamond',serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1320px;
  --read:680px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:18px;
  line-height:1.78;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  position:relative;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--saffron);color:var(--paper)}

/* ---------- Paper grain overlay ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:0%;z-index:1200;
  background:linear-gradient(90deg,var(--gold),var(--saffron));
  transition:width .12s linear;
}

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;color:var(--ink)}
.deva{font-family:var(--deva);font-weight:400}

.eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--saffron-deep);
  display:flex;align-items:center;gap:1rem;
}
.eyebrow::before,.eyebrow.center::after{
  content:"";height:1px;width:clamp(28px,5vw,64px);background:var(--gold);opacity:.6;
}
.eyebrow.center{justify-content:center}

.kicker{
  font-family:var(--body);font-size:.7rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:500;
}

.display{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.012em}
.h-section{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.01em}
.h-sub{font-size:clamp(1.5rem,2.6vw,2.2rem)}

.lede{
  font-size:clamp(1.18rem,1.9vw,1.5rem);
  line-height:1.62;color:var(--ink);font-weight:300;
}
p.body{margin-bottom:1.25rem}
.prose p{margin-bottom:1.3rem}
.prose p:last-child{margin-bottom:0}
.muted{color:var(--ink-soft)}
.fine{font-size:.86rem;color:var(--ink-soft);font-style:italic;line-height:1.6}

em,i{font-style:italic}
strong,b{font-weight:500;color:var(--ink)}

/* Pull-quote / teaching line */
.teaching{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.32;
  color:var(--ink);max-width:18ch;
}
.attribution{
  font-family:var(--body);font-size:.74rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--saffron-deep);margin-top:1.4rem;
}

/* Sanskrit verse block */
.verse{
  font-family:var(--deva);font-size:clamp(1.25rem,2.3vw,1.7rem);
  line-height:1.85;color:var(--ink);text-align:center;
}
.verse-block{
  text-align:center;padding:clamp(2rem,5vw,3.5rem) 0;
  position:relative;
}
.verse-block .translit{
  font-style:italic;color:var(--ink-soft);font-size:1.05rem;
  margin-top:.9rem;letter-spacing:.01em;
}
.verse-block .gloss{
  margin-top:.5rem;color:var(--ink);font-size:1.1rem;
}
.verse-block .src{
  margin-top:1.2rem;font-family:var(--body);font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.4rem,5vw,5rem)}
.narrow{max-width:920px;margin:0 auto;padding:0 clamp(1.4rem,5vw,3rem)}
.read{max-width:var(--read);margin:0 auto;padding:0 clamp(1.4rem,5vw,3rem)}
section{position:relative}
.pad{padding:clamp(4.5rem,11vw,9rem) 0}
.pad-sm{padding:clamp(3rem,7vw,5.5rem) 0}
.center{text-align:center}
.stack>*+*{margin-top:1.3rem}

/* diamond divider */
.divider{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  color:var(--gold);font-size:.7rem;letter-spacing:.5em;
  padding:clamp(2rem,5vw,3.5rem) 0;
}
.divider::before,.divider::after{
  content:"";height:1px;width:min(20vw,140px);
  background:linear-gradient(90deg,transparent,var(--gold-pale));
}
.divider::after{background:linear-gradient(90deg,var(--gold-pale),transparent)}

/* big scroll numeral */
.scroll-no{
  font-family:var(--serif);font-size:clamp(3.5rem,8vw,7rem);
  font-weight:300;color:var(--gold);opacity:.32;line-height:.8;
  font-style:italic;
}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),
             padding .5s var(--ease),border-color .5s var(--ease);
  padding:1.5rem 0;border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(243,233,210,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:.75rem 0;border-bottom:1px solid var(--line);
  box-shadow:0 14px 40px -28px rgba(25,16,6,.6);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.6rem}

.brand{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.brand img{
  height:54px;width:54px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line-gold);
  box-shadow:0 0 0 4px rgba(184,144,31,.08),0 8px 22px -12px rgba(25,16,6,.5);
  transition:height .5s var(--ease),width .5s var(--ease);
}
.scrolled .brand img{height:42px;width:42px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-family:var(--serif);font-size:1.32rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.brand-sub{
  font-family:var(--body);font-size:.56rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.28rem;
}

.nav-menu{display:flex;align-items:center;gap:1.5rem;list-style:none;flex-shrink:0}
.nav-menu a{
  font-family:var(--body);font-size:.71rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);position:relative;white-space:nowrap;
  padding:.4rem 0;font-weight:500;transition:color .3s var(--ease);
}
.nav-menu a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--saffron);transition:width .4s var(--ease);
}
.nav-menu a:hover{color:var(--saffron-deep)}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%}
.nav-menu a.active{color:var(--saffron-deep)}

/* dropdown */
.has-sub{position:relative}
.submenu{
  position:absolute;top:calc(100% + .9rem);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--paper);border:1px solid var(--line);min-width:260px;
  padding:.7rem 0;box-shadow:var(--shadow-card);
  opacity:0;visibility:hidden;transition:all .35s var(--ease);
  list-style:none;
}
.submenu li{
  list-style:none;
  margin:0;
  padding:0;
}
.has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu li a{
  display:block;padding:.6rem 1.5rem;letter-spacing:.1em;font-size:.74rem;
  color:var(--ink);
}
.submenu li a::after{display:none}
.submenu li a:hover,.submenu li a:focus{background:var(--paper-2);color:var(--saffron-deep)}
/* the dropdown panel is always light — its links stay dark in every header state */
.scrolled .submenu li a{color:var(--ink)}
.scrolled .submenu li a:hover,.scrolled .submenu li a:focus{color:var(--saffron-deep)}

/* header text adapts: light over the dark hero, dark once scrolled */
.brand-name{color:var(--cream-text)}
.brand-sub{color:rgba(241,230,204,.6)}
.nav-menu a{color:rgba(241,230,204,.92)}
.nav-menu a:hover,.nav-menu a.active{color:var(--gold-bright)}
.nav-menu a::after{background:var(--gold-bright)}
.burger span{background:var(--cream-text)}
.scrolled .brand-name{color:var(--ink)}
.scrolled .brand-sub{color:var(--ink-faint)}
.scrolled .nav-menu a{color:var(--ink)}
.scrolled .nav-menu a:hover,.scrolled .nav-menu a.active{color:var(--saffron-deep)}
.scrolled .nav-menu a::after{background:var(--saffron)}
.scrolled .burger span{background:var(--ink)}

/* CTA pill */
.pill{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  background:var(--saffron);color:var(--paper);
  padding:.85rem 1.6rem;border-radius:999px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
  box-shadow:0 12px 26px -14px rgba(162,74,12,.7);
}
.pill:hover{transform:translateY(-2px);background:var(--saffron-deep);
  box-shadow:0 18px 34px -14px rgba(162,74,12,.85)}
.pill .arrow{transition:transform .35s var(--ease)}
.pill:hover .arrow{transform:translateX(4px)}
.pill.ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--line-strong);box-shadow:none;
}
.pill.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill.on-dark{background:var(--gold-bright);color:var(--night)}
.pill.on-dark:hover{background:var(--gold)}
.pill.ghost.on-dark{background:transparent;color:var(--cream-text);
  border-color:rgba(232,214,160,.4)}
.pill.ghost.on-dark:hover{background:var(--gold-bright);color:var(--night);
  border-color:var(--gold-bright)}

.nav-cta{flex-shrink:0}

/* burger */
.burger{display:none;flex-direction:column;gap:5px;padding:8px;z-index:1100}
.burger span{display:block;width:24px;height:1.6px;background:var(--ink);
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* mobile drawer */
.mobile-nav{
  position:fixed;inset:0;z-index:1050;background:var(--night);
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem 2rem 2rem;
  transform:translateY(-100%);transition:transform .6s var(--ease);
  overflow-y:auto;
}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav a{
  font-family:var(--serif);font-size:1.7rem;color:var(--cream-text);
  padding:.55rem 0;border-bottom:1px solid rgba(232,214,160,.12);
  display:block;
}
.mobile-nav a.sub{font-size:1.15rem;padding-left:1.2rem;color:var(--gold-pale)}
.mobile-nav .m-cta{margin-top:2rem}

/* =====================================================================
   HERO (home)
   ===================================================================== */
.hero{
  min-height:100svh;display:flex;align-items:center;
  background:
    radial-gradient(120% 80% at 75% 15%,rgba(219,176,68,.16),transparent 60%),
    radial-gradient(90% 70% at 12% 90%,rgba(194,97,26,.12),transparent 55%),
    linear-gradient(180deg,#211609,#160d04 70%);
  color:var(--cream-text);position:relative;overflow:hidden;
  padding:9rem 0 5rem;
}
.hero .wrap{position:relative;z-index:3}
.hero-glow{
  position:absolute;border-radius:50%;filter:blur(70px);
  pointer-events:none;z-index:1;
}
.hero-glow.g1{width:520px;height:520px;top:-12%;right:-6%;
  background:radial-gradient(circle,rgba(219,176,68,.34),transparent 70%)}
.hero-glow.g2{width:420px;height:420px;bottom:-16%;left:-10%;
  background:radial-gradient(circle,rgba(194,97,26,.26),transparent 70%)}

.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,5rem);align-items:center}

.hero-time{
  font-family:var(--body);font-size:.74rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:1.8rem;
}
.hero h1{
  font-size:clamp(2.9rem,6.3vw,5.6rem);color:var(--cream-text);
  font-weight:300;letter-spacing:-.015em;margin-bottom:1.7rem;
}
.hero h1 em{color:var(--gold-bright);font-weight:400}
.hero-copy p{color:rgba(241,230,204,.82);font-weight:300;
  font-size:1.12rem;max-width:46ch;margin-bottom:1.15rem}
.hero-copy p em{color:var(--gold-pale)}
.hero-cta{margin-top:2.4rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero-note{font-size:.82rem;color:rgba(241,230,204,.5);font-style:italic;margin-top:1rem}

/* hero medallion */
.medallion{position:relative;display:flex;align-items:center;justify-content:center}
.medallion img{
  width:min(100%,400px);border-radius:50%;
  border:1px solid rgba(219,176,68,.4);
  box-shadow:0 0 0 14px rgba(219,176,68,.05),
             0 0 90px -10px rgba(219,176,68,.4),
             0 40px 80px -30px rgba(0,0,0,.7);
}
.ring{
  position:absolute;border-radius:50%;border:1px solid rgba(219,176,68,.22);
}
.ring.r1{inset:-6%;animation:spin 60s linear infinite}
.ring.r2{inset:-14%;border-style:dashed;border-color:rgba(219,176,68,.16);
  animation:spin 110s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* scroll hint */
.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;z-index:3;
  font-family:var(--body);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(241,230,204,.55);
}
.scroll-hint .line{width:1px;height:46px;background:linear-gradient(var(--gold-bright),transparent);
  animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* =====================================================================
   PAGE HERO (interior pages)
   ===================================================================== */
.page-hero{
  background:linear-gradient(180deg,#1d1308,#160d04);
  color:var(--cream-text);padding:11rem 0 5.5rem;
  position:relative;overflow:hidden;text-align:center;
}
.page-hero .hero-glow.g1{width:440px;height:440px;top:-20%;right:8%}
.page-hero .hero-glow.g2{width:360px;height:360px;bottom:-26%;left:6%}
.page-hero .wrap{position:relative;z-index:3}
.page-hero .eyebrow{color:var(--gold-bright);justify-content:center}
.page-hero .eyebrow::before,.page-hero .eyebrow::after{background:var(--gold-bright);opacity:.7}
.page-hero h1{
  color:var(--cream-text);font-weight:300;
  font-size:clamp(2.6rem,5.4vw,4.6rem);margin:1.4rem auto;max-width:18ch;
}
.page-hero h1 em{color:var(--gold-bright)}
.page-hero .ph-lead{
  color:rgba(241,230,204,.8);font-weight:300;font-size:1.18rem;
  max-width:50ch;margin:0 auto;
}
.page-hero .tag{
  font-family:var(--body);font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--saffron);
}

/* breadcrumb-ish star tag */
.star-tag{
  display:inline-block;font-family:var(--body);font-size:.64rem;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--night);background:var(--gold-bright);
  padding:.4rem .9rem;border-radius:999px;margin-bottom:1rem;
}

/* =====================================================================
   STORY OPENER (every page opens with a scene)
   ===================================================================== */
.scene{
  background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.scene-line{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,3.2vw,2.7rem);line-height:1.34;
  color:var(--ink);max-width:22ch;
}

/* image-direction placeholder — elegant art slot */
.art-slot{
  position:relative;border:1px solid var(--line-gold);
  background:
    radial-gradient(80% 80% at 30% 20%,rgba(219,176,68,.14),transparent 70%),
    linear-gradient(160deg,var(--night-2),var(--night));
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.art-slot.tall{aspect-ratio:3/4}
.art-slot.wide{aspect-ratio:16/9}
/* a real photograph filling the frame */
.art-slot>img.fill{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;
}
.art-slot.has-photo{background:var(--night);border-color:var(--line-gold)}
/* a line-art illustration centred in the frame */
.art-slot>img.art-svg{
  width:66%;max-width:300px;height:auto;
  filter:drop-shadow(0 0 26px rgba(219,176,68,.13));
}
.art-slot>img.art-svg.emblem{width:50%;max-width:158px}
.art-slot .art-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:1rem 1.2rem;font-family:var(--body);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(241,230,204,.55);
  background:linear-gradient(transparent,rgba(0,0,0,.55));
}

/* =====================================================================
   GENERIC CARDS / GRIDS
   ===================================================================== */
.grid{display:grid;gap:1.6rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--paper);border:1px solid var(--line);
  padding:clamp(1.6rem,3vw,2.4rem);position:relative;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);
  border-color:var(--line-gold)}
.card .card-no{
  font-family:var(--serif);font-style:italic;font-size:1.5rem;
  color:var(--gold);margin-bottom:.6rem;
}
.card h3{font-size:1.5rem;margin-bottom:.7rem}
.card .deva-label{
  font-family:var(--deva);font-size:1.7rem;color:var(--saffron-deep);
  display:block;margin-bottom:.3rem;line-height:1.2;
}
.card p{font-size:.98rem;color:var(--ink-soft)}

/* pillar (4 pillars) */
.pillar{
  text-align:center;padding:2rem 1.2rem;border:1px solid var(--line);
  background:var(--paper);transition:all .5s var(--ease);
}
.pillar:hover{background:var(--night);border-color:var(--night)}
.pillar:hover .pillar-deva,.pillar:hover h4,.pillar:hover p{color:var(--cream-text)}
.pillar:hover .pillar-deva{color:var(--gold-bright)}
.pillar-deva{font-family:var(--deva);font-size:2.4rem;color:var(--saffron-deep);
  transition:color .5s var(--ease)}
.pillar h4{font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;
  margin:.6rem 0;font-family:var(--body);font-weight:500;
  transition:color .5s var(--ease)}
.pillar p{font-size:.92rem;color:var(--ink-soft);font-style:italic;
  transition:color .5s var(--ease)}

/* dark feature block */
.dark{
  background:linear-gradient(170deg,var(--night-2),var(--night));
  color:var(--cream-text);position:relative;overflow:hidden;
}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--cream-text)}
.dark .muted{color:rgba(241,230,204,.62)}
.dark .eyebrow{color:var(--gold-bright)}
.dark .eyebrow::before,.dark .eyebrow::after{background:var(--gold-bright)}
.dark .teaching{color:var(--gold-pale)}
.dark .prose p{color:rgba(241,230,204,.82)}
/* a card keeps its light background even inside a dark section,
   so its text must stay dark to remain legible */
.dark .card h3,.dark .card .h-sub{color:var(--ink)}
.dark .card p,.dark .card .muted{color:var(--ink-soft)}
.dark .card .kicker{color:var(--ink-faint)}
.dark .glow{
  position:absolute;width:480px;height:480px;border-radius:50%;
  filter:blur(80px);background:radial-gradient(circle,rgba(219,176,68,.2),transparent 70%);
  pointer-events:none;
}

/* two-direction (pramaan / vikalp) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-gold)}
.duo .side{padding:clamp(1.8rem,4vw,3rem)}
.duo .side.pramaan{background:rgba(219,176,68,.06)}
.duo .side.vikalp{background:rgba(25,16,6,.04);border-left:1px solid var(--line-gold)}
.duo .side .label{
  font-family:var(--deva);font-size:2rem;color:var(--ink);margin-bottom:.2rem;
}
.duo .side .label-en{
  font-family:var(--body);font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--saffron-deep);margin-bottom:1.2rem;
}
.duo .side .desc{font-size:1.02rem;margin-bottom:1rem}
.duo .side .day{font-size:.96rem;font-style:italic;color:var(--ink-soft)}

/* teacher split */
.split{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.flip{grid-template-columns:1.15fr .85fr}

/* table — editorial */
.tbl{width:100%;border-collapse:collapse;font-size:.96rem}
.tbl th{
  text-align:left;font-family:var(--body);font-weight:500;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--saffron-deep);padding:.9rem 1rem;
  border-bottom:1px solid var(--line-strong);
}
.tbl td{padding:1rem;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--ink-soft)}
.tbl tr:hover td{background:rgba(219,176,68,.05)}
.tbl td strong,.tbl td .deva{color:var(--ink)}
.tbl td .deva{font-size:1.15rem}
.tbl .num{font-family:var(--serif);font-style:italic;font-size:1.3rem;
  color:var(--gold);width:54px}
/* tables inside dark sections — keep every cell legible on walnut */
.dark .tbl th{color:var(--gold-bright)}
.dark .tbl td{color:rgba(241,230,204,.84)}
.dark .tbl td strong{color:var(--cream-text)}
.dark .tbl td .deva{color:var(--gold-bright)}
.dark .tbl th,.dark .tbl td{border-color:rgba(219,176,68,.20)}
.dark .tbl tr:hover td{background:rgba(219,176,68,.08)}
/* any text element whose base colour is dark ink must be lightened
   inside a dark section — otherwise it is invisible on walnut */
.dark strong,.dark b{color:var(--cream-text)}
.dark .card strong,.dark .card b{color:var(--ink)}
.dark .lede{color:rgba(241,230,204,.84)}
.dark .verse{color:var(--gold-pale)}
.dark .gloss{color:rgba(241,230,204,.86)}
.dark .translit{color:rgba(241,230,204,.72)}

/* list — refined */
.tick{list-style:none}
.tick li{
  position:relative;padding-left:1.8rem;margin-bottom:.95rem;
  color:var(--ink-soft);
}
.tick li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg);
}
.tick.dark-list li{color:rgba(241,230,204,.8)}
.tick.dark-list li::before{border-color:var(--gold-bright)}

/* timeline (a day at retreat / generations) */
.timeline{border-left:1px solid var(--line-gold);padding-left:2rem;
  position:relative}
.t-item{position:relative;padding-bottom:2rem}
.t-item::before{
  content:"";position:absolute;left:calc(-2rem - 5px);top:.4em;
  width:10px;height:10px;background:var(--paper);
  border:1px solid var(--gold);transform:rotate(45deg);
}
.t-item .t-time{font-family:var(--serif);font-style:italic;font-size:1.3rem;
  color:var(--saffron-deep)}
.t-item .t-body{color:var(--ink-soft);font-size:.98rem}

/* testimonial */
.testimonial{
  border-left:2px solid var(--gold);padding:1.5rem 0 1.5rem 2rem;
  margin:2.5rem 0;
}
.testimonial blockquote{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.5;color:var(--ink);
}
.testimonial cite{
  display:block;margin-top:1.2rem;font-family:var(--body);font-style:normal;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--saffron-deep);
}

/* offering / pricing tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.tier{
  border:1px solid var(--line);padding:2.2rem 1.8rem;background:var(--paper);
  display:flex;flex-direction:column;transition:all .5s var(--ease);
}
.tier:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);
  border-color:var(--gold)}
.tier .tier-name{font-family:var(--serif);font-size:1.55rem;margin-bottom:.5rem}
.tier .tier-meta{font-size:.92rem;color:var(--ink-soft);flex-grow:1}
.tier .tier-price{
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--gold);
}

/* =====================================================================
   FORMS
   ===================================================================== */
.form-card{
  background:var(--paper);border:1px solid var(--line-gold);
  padding:clamp(1.8rem,4vw,3rem);box-shadow:var(--shadow-soft);
}
.field{margin-bottom:1.4rem}
.field label{
  display:block;font-family:var(--body);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--saffron-deep);
  margin-bottom:.5rem;font-weight:500;
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);
  padding:.85rem 1rem;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--paper);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.phone-row{display:grid;grid-template-columns:120px 1fr;gap:.8rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;
  color:var(--ink-soft);margin-bottom:1.4rem;cursor:pointer}
.check input{margin-top:.3rem;accent-color:var(--saffron);flex-shrink:0}
.btn-submit{
  width:100%;background:var(--saffron);color:var(--paper);
  font-family:var(--body);font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;padding:1.05rem;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.btn-submit:hover{background:var(--saffron-deep);transform:translateY(-2px)}
.form-note{
  font-size:.8rem;color:var(--ink-soft);font-style:italic;
  margin-top:1.2rem;line-height:1.6;
}
.form-success{
  display:none;text-align:center;padding:2rem;
}
.form-success.show{display:block}
.form-success .tick-mark{
  width:56px;height:56px;border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;
  color:var(--gold);font-size:1.6rem;
}

/* =====================================================================
   CTA BAND (closing every page)
   ===================================================================== */
.cta-band{
  background:linear-gradient(160deg,var(--night-2),var(--night));
  color:var(--cream-text);text-align:center;position:relative;overflow:hidden;
}
.cta-band .glow{position:absolute;width:520px;height:520px;border-radius:50%;
  filter:blur(90px);background:radial-gradient(circle,rgba(219,176,68,.22),transparent 70%);
  top:-30%;left:50%;transform:translateX(-50%)}
.cta-band h2{color:var(--cream-text);font-weight:300;
  font-size:clamp(2rem,4vw,3.2rem);max-width:20ch;margin:0 auto 1rem}
.cta-band h2 em{color:var(--gold-bright)}
.cta-band p{color:rgba(241,230,204,.7);max-width:46ch;margin:0 auto 2rem;
  font-weight:300}
.cta-band .actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:var(--night);color:rgba(241,230,204,.62);
  padding:4.5rem 0 0;border-top:1px solid rgba(219,176,68,.18)}
.footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(241,230,204,.1);
}
.footer-brand .brand-name{color:var(--cream-text)}
.footer-brand p{font-size:.92rem;margin-top:1rem;max-width:32ch;line-height:1.7}
.footer-col h5{
  font-family:var(--body);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:1.1rem;font-weight:500;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.6rem}
.footer-col a{font-size:.92rem;transition:color .3s var(--ease)}
.footer-col a:hover{color:var(--gold-pale)}
.footer-diag{
  text-align:center;padding:1.8rem 0;
  border-bottom:1px solid rgba(241,230,204,.1);
}
.footer-diag span{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  color:var(--gold-pale);letter-spacing:.04em;
}
.footer-base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:1.6rem 0;font-size:.74rem;color:rgba(241,230,204,.4);
}
.footer-base a{font-size:.74rem}
.footer-base a:hover{color:var(--gold-pale)}

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
.reveal{opacity:0;transform:translateY(34px);filter:blur(3px);
  transition:opacity 1.05s var(--ease),transform 1.05s var(--ease),filter 1.05s var(--ease)}
.reveal.is-visible{opacity:1;transform:none;filter:blur(0)}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
.reveal.d4{transition-delay:.48s}
.reveal.d5{transition-delay:.6s}

.reveal-l{opacity:0;transform:translateX(-40px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-l.is-visible{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(40px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-r.is-visible{opacity:1;transform:none}

/* hero load sequence */
.hero-anim{opacity:0;transform:translateY(28px);
  animation:heroIn 1.1s var(--ease) forwards}
.hero-anim.a1{animation-delay:.15s}
.hero-anim.a2{animation-delay:.32s}
.hero-anim.a3{animation-delay:.49s}
.hero-anim.a4{animation-delay:.66s}
.hero-anim.a5{animation-delay:.83s}
@keyframes heroIn{to{opacity:1;transform:none}}
.medallion{opacity:0;animation:medIn 1.5s var(--ease) .35s forwards}
@keyframes medIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1080px){
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:1080px){
  body{font-size:17px}
  .nav-menu,.nav-cta{display:none}
  .burger{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .medallion{max-width:340px;margin:0 auto;order:-1}
  .split,.split.flip{grid-template-columns:1fr;gap:2.2rem}
  .grid-3,.grid-4,.tiers{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .duo .side.vikalp{border-left:none;border-top:1px solid var(--line-gold)}
  .field-row{grid-template-columns:1fr}
  .scene .split{gap:2rem}
  /* reveal vertically on narrow screens — no sideways shift, no overflow */
  .reveal-l,.reveal-r{transform:translateY(30px)}
  .reveal-l.is-visible,.reveal-r.is-visible{transform:none}
  /* the mobile menu can be taller than the screen — let it scroll
     from the top so the closing CTA is always reachable */
  .mobile-nav{justify-content:flex-start;padding:5rem 2rem 3.4rem;
    -webkit-overflow-scrolling:touch}
}
@media(max-width:560px){
  .pad{padding:3.4rem 0}
  .tbl{font-size:.86rem}
  .tbl th,.tbl td{padding:.7rem .5rem}
  .tbl .num{width:38px;font-size:1rem}
  .footer-top{grid-template-columns:1fr}
  .hero h1{font-size:2.5rem}
  .brand-sub{display:none}
  .footer-base{flex-direction:column;text-align:center}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.reveal-l,.reveal-r,.hero-anim,.medallion{opacity:1!important;transform:none!important;filter:none!important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   AMBIENT SOUND TOGGLE
   ===================================================================== */
.sound-toggle{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:60;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(160deg,var(--night-2),var(--night));
  border:1px solid var(--line-gold);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.sound-toggle:hover{transform:translateY(-3px);border-color:var(--gold-bright);
  box-shadow:0 10px 28px rgba(0,0,0,.45)}
.sound-bars{display:flex;align-items:flex-end;gap:3px;height:18px}
.sound-bars i{
  width:3px;border-radius:2px;
  background:var(--gold-bright);opacity:.55;
  transition:opacity .3s var(--ease),height .3s var(--ease);
}
.sound-bars i:nth-child(1){height:8px}
.sound-bars i:nth-child(2){height:15px}
.sound-bars i:nth-child(3){height:6px}
.sound-bars i:nth-child(4){height:11px}
.sound-toggle.playing .sound-bars i{opacity:1;animation:eq 1s ease-in-out infinite}
.sound-toggle.playing .sound-bars i:nth-child(1){animation-delay:-.10s}
.sound-toggle.playing .sound-bars i:nth-child(2){animation-delay:-.48s}
.sound-toggle.playing .sound-bars i:nth-child(3){animation-delay:-.26s}
.sound-toggle.playing .sound-bars i:nth-child(4){animation-delay:-.62s}
@keyframes eq{0%,100%{height:5px}50%{height:17px}}
@media (prefers-reduced-motion:reduce){
  .sound-toggle.playing .sound-bars i{animation:none;height:12px}
}
@media (max-width:640px){
  .sound-toggle{right:1rem;bottom:1rem;width:44px;height:44px}
}

/* =====================================================================
   VIDEO / FILM SECTION
   ===================================================================== */
.film-frame{
  position:relative;max-width:1000px;margin:2.6rem auto 0;
  border:1px solid var(--line-gold);background:var(--night);
  border-radius:3px;overflow:hidden;box-shadow:var(--shadow-card);
}
.film-frame video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--night);object-fit:cover;
}
.film-caption{
  margin-top:1.4rem;text-align:center;font-family:var(--body);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(241,230,204,.5);
}