/* ============================================================
   K4K Design System — Shared Stylesheet
   Source of truth for: home, about, workshops, dohas, watch, ask-kabir
   Locked: Lora + DM Sans + Baloo 2 · Rooted Warmth palette
   ============================================================ */

/* TOKENS ---------------------------------------------------- */
:root{
  /* Rooted Warmth palette (Brand Bible §5) */
  --root:#5B4B2E;        /* Root Brown — text, headings */
  --root-2:#3E331F;      /* Deeper brown — footer */
  --root-soft:#7A6648;   /* Muted brown — secondary text */
  --bronze:#C2833A;      /* Bronze — decorative accents, borders, illustration tints */
  --bronze-2:#B27531;    /* Bronze hover — decorative use only */
  --bronze-soft:#E5BE8E;
  --bronze-deep:#8B5A1F;       /* WCAG-AA bronze (5.67:1 on cream) — text + button bg */
  --bronze-deep-2:#704818;     /* Bronze-deep hover */
  --aqua:#94D2D5;        /* Pearl Aqua — kurta, calm cards */
  --aqua-soft:#D4ECEE;
  --platinum:#F3F7F8;    /* Soft Platinum — alternate sections */
  --sand:#BBBE60;        /* Golden Sand — nature, tags */
  --sand-soft:#E1E3B5;
  --cream:#FFF8EA;       /* Apricot Cream — main warm bg */
  --cream-2:#FCEFD3;
  --peach:#F4D9B0;
  --yellow:#F8C838;      /* Kabir Yellow — joy, badges */
  --yellow-soft:#FCE39A;
  --line:rgba(91,75,46,.12);
  --line-soft:rgba(91,75,46,.06);

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);

  /* shadows */
  --shadow-sm:0 2px 8px rgba(91,75,46,.06);
  --shadow-md:0 8px 24px rgba(91,75,46,.08);
  --shadow-lg:0 24px 60px rgba(91,75,46,.12);

  /* layout */
  --container:1340px;
  --container-narrow:1080px;
  --pad-x:40px;
}

/* RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--root);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
section[id]{scroll-margin-top:90px}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--yellow);color:var(--root)}

/* TYPOGRAPHY UTILITIES ------------------------------------- */
.display{
  font-family:'Lora',serif;font-weight:600;
  letter-spacing:-.01em;line-height:1.15;
  color:var(--root);text-wrap:balance;
}
.serif{font-family:'Lora',serif;font-weight:600;color:var(--root)}
.serif-italic{font-family:'Lora',serif;font-weight:500;font-style:italic;color:var(--root)}
.devanagari{font-family:'Baloo 2','Hind','Noto Serif Devanagari',sans-serif;font-weight:600;line-height:1.5}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'DM Sans',sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze-deep);
}
.eyebrow::before,.eyebrow::after{content:"";width:24px;height:1px;background:var(--bronze)}
.eyebrow.solo::after{display:none}

/* CONTAINER ------------------------------------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--pad-x)}

/* SECTION HEAD --------------------------------------------- */
.section-head{text-align:center;max-width:720px;margin:0 auto 56px}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{
  font-family:'Lora',serif;font-weight:600;
  font-size:clamp(32px,4.2vw,52px);
  line-height:1.15;letter-spacing:-.01em;
  color:var(--root);text-wrap:balance;
}
.section-head h2 em{font-style:italic;color:var(--bronze-deep);font-weight:600}
.section-head p{
  margin-top:14px;color:var(--root-soft);
  font-size:17px;line-height:1.55;
  max-width:580px;margin-left:auto;margin-right:auto;
}

/* BUTTONS --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  font-family:'DM Sans',sans-serif;
  font-weight:600;font-size:14.5px;letter-spacing:.005em;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  cursor:pointer;white-space:nowrap;
}
.btn-dark{background:var(--root);color:#fff}
.btn-dark:hover{background:var(--root-2)}
.btn-bronze{background:var(--bronze-deep);color:#fff}
.btn-bronze:hover{background:var(--bronze-deep-2)}
.btn-yellow{background:var(--yellow);color:var(--root)}
.btn-yellow:hover{background:#F0BD2A}
.btn-outline{background:transparent;color:var(--root);border:1.5px solid var(--root)}
.btn-outline:hover{background:var(--root);color:#fff}
.btn-ghost{background:rgba(91,75,46,.06);color:var(--root)}
.btn-ghost:hover{background:rgba(91,75,46,.12)}
.btn:active{transform:scale(.97)}
.btn svg{width:14px;height:14px}

/* SHARED HEADER (morphing logo + auto-hide) ---------------- */
/* Reserved hero space for fixed header */
body.has-fixed-header{padding-top:200px}
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:padding .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease);
  padding:20px 40px 15px;
  will-change:padding,transform;
  contain:layout style;
}
html.header-hidden .site-header{transform:translateY(-100%)}
.header-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.logo-link{display:inline-flex;align-items:center}
.logo-link img{
  height:128px;width:auto;
  transition:height .25s var(--ease);
  will-change:height;
  filter:drop-shadow(0 2px 0 rgba(91,75,46,.04));
}
.main-nav{
  display:flex;align-items:center;gap:8px;
  font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:600;color:var(--root);
}
.main-nav a{
  padding:9px 18px;border-radius:999px;
  transition:all .2s var(--ease);
  position:relative;
}
.main-nav a:not(.yt):hover{color:var(--bronze-deep)}
.main-nav a.active{background:var(--bronze-deep);color:#fff}
.main-nav a.yt{
  margin-left:14px;
  width:42px;height:32px;
  background:#FF0033;color:#fff;
  border-radius:9px;
  display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(255,0,51,.25);
  padding:0;
  transition:transform .2s var(--ease);
}
.main-nav a.yt:hover{transform:scale(1.06)}
.main-nav a.yt:active{transform:scale(.96)}
.main-nav a:active{transform:scale(.97)}

/* Scrolled (compact) state */
html.scrolled .site-header{
  padding:8px 40px;
  border-bottom-color:var(--line-soft);
  box-shadow:0 1px 0 rgba(91,75,46,.04),0 6px 20px rgba(91,75,46,.04);
}
html.scrolled .header-inner{
  flex-direction:row;justify-content:space-between;align-items:center;gap:24px;
}
html.scrolled .logo-link img{height:53px}
html.scrolled .main-nav{gap:6px;font-size:14.5px}
html.scrolled .main-nav a{padding:7px 15px}

/* MOBILE NAV — hamburger + slide-in drawer ----------------- */
.menu-toggle{
  display:none;
  width:44px;height:44px;border-radius:12px;
  background:transparent;color:var(--root);
  align-items:center;justify-content:center;
  border:1.5px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease);
  cursor:pointer;
}
.menu-toggle:hover,.menu-toggle:focus-visible{background:rgba(91,75,46,.06);border-color:var(--line-soft)}
.menu-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.menu-toggle .icon-close{display:none}
html.drawer-open .menu-toggle .icon-open{display:none}
html.drawer-open .menu-toggle .icon-close{display:block}

.nav-backdrop{
  position:fixed;inset:0;z-index:80;
  background:rgba(40,30,18,.42);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
}
html.drawer-open .nav-backdrop{opacity:1;pointer-events:auto}

.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(320px,86vw);
  background:var(--cream);
  box-shadow:-12px 0 32px rgba(40,30,18,.18);
  transform:translateX(100%);
  transition:transform .3s var(--ease-out);
  display:flex;flex-direction:column;
  padding:80px 28px 32px;
  overflow-y:auto;
}
html.drawer-open .nav-drawer{transform:translateX(0)}
.nav-drawer a{
  display:flex;align-items:center;
  font-family:'DM Sans',sans-serif;font-size:17px;font-weight:600;
  color:var(--root);
  padding:14px 8px;
  min-height:48px;
  border-bottom:1px solid var(--line-soft);
  transition:color .15s var(--ease);
}
.nav-drawer a:hover,.nav-drawer a:focus-visible{color:var(--bronze-deep)}
.nav-drawer a.active{color:var(--bronze-deep)}
.nav-drawer .drawer-yt{
  margin-top:18px;
  background:#FF0033;color:#fff;
  padding:14px 18px;border-radius:12px;
  display:inline-flex;align-items:center;gap:10px;
  justify-content:center;
  font-size:15px;font-weight:600;border-bottom:0;
  min-height:48px;
  box-shadow:0 4px 12px rgba(255,0,51,.22);
}
.nav-drawer .drawer-yt:hover,.nav-drawer .drawer-yt:focus-visible{color:#fff;background:#E5002C}
.nav-drawer .drawer-yt svg{width:20px;height:14px;fill:currentColor;stroke:none}
html.drawer-open{overflow:hidden}

/* SHARED FOOTER -------------------------------------------- */
.site-footer{background:var(--root-2);color:#D7C8A6;padding:64px 40px 32px}
.foot-grid{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;
}
.foot-brand img{height:60px;margin-bottom:18px;background:#fff;padding:14px 18px;border-radius:14px}
.foot-brand p{font-size:13px;line-height:1.6;color:#B5A382;max-width:280px}
.foot-col h5,.foot-col-head{font-size:13px;color:#fff;margin-bottom:14px;font-weight:700;letter-spacing:.04em;font-family:'DM Sans',sans-serif;margin-top:0}
.foot-col a{display:block;font-size:13.5px;color:#B5A382;margin-bottom:8px;transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--yellow)}
.socials{display:flex;gap:8px;margin-top:6px}
.socials a{
  width:34px;height:34px;background:rgba(255,255,255,.06);
  border-radius:50%;display:grid;place-items:center;color:#B5A382;
  transition:all .2s var(--ease);margin:0;
}
.socials a:hover{background:var(--yellow);color:var(--root)}
.foot-bottom{
  max-width:var(--container);margin:48px auto 0;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:#85775A;flex-wrap:wrap;gap:14px;
}
.foot-bottom .heart{color:var(--bronze)}

/* CINEMATIC HERO (full-bleed S-image with overlay text) ---- */
.cine-hero{
  position:relative;background:var(--cream);overflow:hidden;
  min-height:clamp(540px,54vw,780px);
  display:flex;align-items:center;
}
.cine-hero .bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 65%;
  background-repeat:no-repeat;z-index:0;
}
.cine-hero .content{
  position:relative;z-index:2;
  max-width:var(--container);margin:0 auto;width:100%;
  padding:80px var(--pad-x) 100px;
}
.cine-hero h1{
  font-family:'Lora',serif;font-weight:600;
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.15;letter-spacing:-.01em;
  color:var(--root);text-wrap:balance;max-width:640px;
}
.cine-hero h1 em{font-style:italic;color:var(--bronze);font-weight:600}
.cine-hero .lede{
  margin-top:22px;font-size:clamp(15px,1.3vw,18px);
  color:var(--root-soft);max-width:440px;font-weight:500;line-height:1.55;
}
.cine-hero .ctas{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}

/* SECTION REVEAL ANIMATIONS ------------------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* Mobile: bypass IntersectionObserver gate; show content immediately */
@media (max-width:768px){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}

/* RESPONSIVE ---------------------------------------------- */
@media (max-width:1024px){
  :root{--pad-x:32px}
  .site-header{padding:18px 32px 14px}
  html.scrolled .site-header{padding:8px 32px}
  .main-nav{gap:4px;font-size:14px}
  .main-nav a{padding:8px 14px}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px}
  .foot-brand{grid-column:1 / -1;margin-bottom:8px}
}
@media (max-width:768px){
  :root{--pad-x:22px}
  /* Single-row compact header on mobile — overrides home morph */
  body.has-fixed-header{padding-top:64px}
  section[id]{scroll-margin-top:72px}
  .site-header,html.scrolled .site-header{padding:8px 16px}
  .header-inner,html.scrolled .header-inner{
    flex-direction:row;justify-content:space-between;align-items:center;gap:12px;
  }
  .logo-link img,html.scrolled .logo-link img{height:40px}
  .main-nav{display:none}
  .menu-toggle{display:inline-flex}

  .cine-hero{min-height:min(720px,calc(100svh - 30px));align-items:flex-start}
  .cine-hero .bg{background-position:62% bottom}
  .cine-hero .content{padding:48px 22px 40px;width:100%}
  .cine-hero h1{font-size:42px;max-width:none}
  .cine-hero .lede{font-size:15px;max-width:none}
  .cine-hero .ctas{margin-top:24px;gap:10px}

  .btn{padding:13px 22px;font-size:14px}
  .section-head{margin-bottom:36px}
  .section-head h2{font-size:30px}

  .site-footer{padding:48px 22px 28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-brand{grid-column:1 / -1}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;text-align:left;margin-top:36px}
}
@media (max-width:440px){
  body.has-fixed-header{padding-top:60px}
  .logo-link img,html.scrolled .logo-link img{height:36px}
  .cine-hero h1{font-size:36px}
  .cine-hero{min-height:min(640px,calc(100svh - 20px))}
  .cine-hero .content{padding:36px 22px 32px}
  .cine-hero .ctas{flex-direction:column;align-items:stretch;width:100%;max-width:280px}
  .btn{justify-content:center;width:100%}
  .foot-grid{grid-template-columns:1fr;gap:24px}
}