/* ==========================================================================
   BEYOND THE MENU — STORIES (floating button + full-screen vertical feed)
   ★ COLOUR BADALNA HO TO SIRF NEECHE KE 4 VALUES BADLO (golden ki jagah jo chahiye) ★
   ========================================================================== */
:root{
  /* ★ NEECHE KA KHALI SPACE: phone ke safe-area ka kitna hissa chhodna hai (0.5 = aadha, 0 = bilkul nahi, 1 = poora) */
  --st-safe-b:calc(env(safe-area-inset-bottom,0px) * 0.45);
  --st-g1:#E4C586;          /* light shade  (gradient shuru, naam/area ka text) */
  --st-g2:#CBA35C;          /* main colour  (button, tag, border) */
  --st-g3:#A57E37;          /* dark shade   (gradient ant) */
  --st-rgb:203,163,92;      /* main colour ka RGB (--st-g2 ke barabar) — glow/border ke liye */

  /* ---- FLOATING "Stories" BUTTON KA ALAG COLOUR (abhi: dark blue + purple gradient) ----
     ★ WAPAS GOLDEN CHAHIYE? Neeche ki 4 lines hata kar, in 4 lines se replace kar do:
          --st-fab-bg:linear-gradient(135deg,var(--st-g1),var(--st-g2) 55%,var(--st-g3));
          --st-fab-text:#1a1408;
          --st-fab-ring:rgba(var(--st-rgb),.65);
          --st-fab-glow:rgba(0,0,0,.45);
  */
  --st-fab-bg:linear-gradient(135deg,#17155a,#3b2f8f 55%,#6a4fe0);
  --st-fab-text:#ffffff;
  --st-fab-ring:rgba(150,125,255,.75);
  --st-fab-glow:rgba(70,50,170,.55);
}

.btm-st-fab{
  position:fixed; right:16px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:950;
  display:inline-flex; align-items:center; gap:9px; padding:12px 18px 12px 14px; border:0; border-radius:999px; cursor:pointer;
  font:700 14px/1 var(--font-sans,Inter,system-ui,sans-serif); letter-spacing:.2px; color:var(--st-fab-text);
  background:var(--st-fab-bg);
  box-shadow:0 10px 30px var(--st-fab-glow),0 0 0 1px rgba(255,255,255,.22) inset;
  transition:transform .55s cubic-bezier(.2,.9,.25,1.15),opacity .4s ease; -webkit-tap-highlight-color:transparent;
}
.btm-st-fab:hover{transform:translateY(-2px)} .btm-st-fab:active{transform:scale(.96)}
.btm-st-fab .ic{width:26px;height:26px;border-radius:50%;background:#050508;display:grid;place-items:center;position:relative}
.btm-st-fab .ic::before{content:"";width:0;height:0;border-left:8px solid var(--st-g1);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.btm-st-fab .ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--st-fab-ring);animation:btmStPulse 2.2s ease-out infinite}
@keyframes btmStPulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.35);opacity:0}}
html.btm-st-open .btm-st-fab{opacity:0;pointer-events:none}
.btm-st-fab.away{transform:translateX(calc(100% + 30px)); opacity:0; pointer-events:none}

html.btm-st-open,html.btm-st-open body{overflow:hidden!important;overscroll-behavior:none}
.btm-st{
  position:fixed; inset:0; z-index:100000; background:#050508; color:#f4f1ea; display:none;
  font-family:var(--font-sans,Inter,system-ui,sans-serif); -webkit-font-smoothing:antialiased;
}
.btm-st.on{display:block; animation:btmStIn .28s ease both}
@keyframes btmStIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.btm-st-feed{
  position:absolute; inset:0; overflow-y:scroll; overflow-x:hidden; scroll-snap-type:y mandatory; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-behavior:smooth;
}
.btm-st-feed::-webkit-scrollbar{display:none}
.btm-st-slide{
  position:relative; height:100vh; height:100dvh; width:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; justify-content:center; background:#050508; overflow:hidden; contain:layout paint size;
}
/* desktop: beech me 9:16 column, side me dhundhla backdrop */
.btm-st-bg{position:absolute; left:0; top:0; width:25%; height:25%; transform:scale(4); transform-origin:0 0; background-size:cover; background-position:center; filter:blur(7px) brightness(.5) saturate(1.2)}   /* quarter size par blur = bahut halka */
.btm-st-stage{position:relative; height:100%; width:100%; max-width:min(100vw,calc(100dvh*9/16)); background:#000; overflow:hidden}
.btm-st-poster,.btm-st-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.btm-st-slide.on .btm-st-photo{animation:btmStKen 14s ease-out both}
@keyframes btmStKen{from{transform:scale(1)}to{transform:scale(1.07)}}
.btm-st-frame{position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; transition:opacity .35s ease; background:#000}
.btm-st-frame.ready{opacity:1}
.btm-st-tap{position:absolute; inset:0; z-index:2; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent}
.btm-st-shade{position:absolute; left:0; right:0; bottom:0; height:46%; z-index:3; pointer-events:none;
  background:linear-gradient(to top,rgba(5,5,8,.92),rgba(5,5,8,.55) 45%,transparent)}
.btm-st-shade.top{top:0; bottom:auto; height:22%; background:linear-gradient(to bottom,rgba(5,5,8,.7),transparent)}
.btm-st-info{position:absolute; left:0; right:0; bottom:0; z-index:4; padding:0 78px calc(6px + var(--st-safe-b)) 18px; pointer-events:none}
.btm-st-tag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#1a1408;
  background:rgba(var(--st-rgb),.95); padding:4px 9px; border-radius:6px; margin-bottom:10px}
.btm-st-name{font-family:var(--font-serif,Fraunces,Georgia,serif); font-weight:700; font-size:clamp(22px,5.6vw,28px); line-height:1.15; margin:0 0 6px; letter-spacing:-.3px; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.btm-st-area{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--st-g1); font-weight:500; margin:0 0 14px}
.btm-st-area svg{width:14px;height:14px;flex:none}
.btm-st-explore{pointer-events:auto; display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; text-decoration:none;
  font-weight:700; font-size:14px; color:#1a1408; background:linear-gradient(135deg,var(--st-g1),var(--st-g2) 55%,var(--st-g3)); box-shadow:0 8px 22px rgba(0,0,0,.4); transition:transform .2s}
.btm-st-explore:active{transform:scale(.96)}
.btm-st-side{position:absolute; right:12px; bottom:calc(8px + var(--st-safe-b)); z-index:5; display:flex; flex-direction:column; gap:16px; align-items:center}
.btm-st-btn{width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.22); cursor:pointer; color:#fff; display:grid; place-items:center;
  background:rgba(20,16,32,.62); transition:transform .2s,background .2s; -webkit-tap-highlight-color:transparent}
.btm-st-btn:active{transform:scale(.9)} .btm-st-btn svg{width:21px;height:21px}
.btm-st-lbl{font-size:10.5px; font-weight:600; margin-top:-10px; text-shadow:0 1px 6px rgba(0,0,0,.7)}
.btm-st-top{position:absolute; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between; padding:calc(14px + env(safe-area-inset-top,0px)) 14px 0; pointer-events:none}
.btm-st-top>*{pointer-events:auto}
.btm-st-brand{font-family:var(--font-serif,Fraunces,Georgia,serif); font-weight:700; font-size:15px; letter-spacing:.2px; text-shadow:0 2px 10px rgba(0,0,0,.6)}
.btm-st-brand b{color:var(--st-g1); font-weight:700}
.btm-st-close{width:40px;height:40px}
.btm-st-count{font-size:12px; color:rgba(255,255,255,.75); margin-right:10px}
.btm-st-pp{position:absolute; left:50%; top:50%; z-index:4; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; display:grid; place-items:center; pointer-events:none;
  background:rgba(5,5,8,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transform:scale(.8); transition:opacity .2s,transform .2s}
.btm-st-pp.show{opacity:1; transform:scale(1)} .btm-st-pp svg{width:30px;height:30px;color:#fff}
.btm-st-sound{position:absolute; left:50%; top:calc(64px + env(safe-area-inset-top,0px)); transform:translateX(-50%); z-index:6; padding:8px 14px; border-radius:999px; border:1px solid rgba(var(--st-rgb),.5);
  background:rgba(20,16,32,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--st-g1); font:600 12px var(--font-sans,Inter,sans-serif); cursor:pointer; white-space:nowrap}
.btm-st-sound[hidden]{display:none}
.btm-st-bar{position:absolute; left:0; right:0; bottom:0; height:3px; z-index:7; background:rgba(255,255,255,.14)}
.btm-st-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--st-g1),var(--st-g2))}
.btm-st-toast{position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(10px); z-index:100001; padding:10px 18px; border-radius:999px;
  background:#1c1730; color:var(--st-g1); border:1px solid rgba(var(--st-rgb),.5); font:600 13px var(--font-sans,Inter,sans-serif); opacity:0; pointer-events:none; transition:.25s}
.btm-st-toast.on{opacity:1; transform:translateX(-50%)}
@media (min-width:900px){ .btm-st-info{padding-right:84px} .btm-st-name{font-size:28px} }
.btm-st-explore{border:0; cursor:pointer; font-family:inherit; line-height:1.2}
@media (prefers-reduced-motion:reduce){ .btm-st-feed{scroll-behavior:auto} .btm-st-slide.on .btm-st-photo,.btm-st-fab .ic::after,.btm-st.on{animation:none} }

.btm-st-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; opacity:0; transition:opacity .3s ease}
.btm-st-vid.ready{opacity:1}
.btm-st-spin{position:absolute; left:50%; top:50%; z-index:4; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:var(--st-g1); animation:btmStSp .8s linear infinite; opacity:0; pointer-events:none; transition:opacity .2s}
.btm-st-spin.on{opacity:1}
@keyframes btmStSp{to{transform:rotate(360deg)}}

.btm-st-logo{display:inline-flex; background:#fff; border-radius:10px; padding:5px 11px; box-shadow:0 4px 14px rgba(0,0,0,.35)}
.btm-st-logo img{height:24px; width:auto; display:block}

/* FRAME FIT: "contain" = poora video dikhe (kuch nahi katta, bachi jagah blur se bharti hai). "cover" = poori screen bhare par kinare kat sakte hain */
.btm-st.fit-contain .btm-st-stage{background:transparent}
.btm-st.fit-contain .btm-st-vid,.btm-st.fit-contain .btm-st-poster,.btm-st.fit-contain .btm-st-photo{object-fit:contain}
.btm-st.fit-contain .btm-st-bg{filter:blur(7px) brightness(.55) saturate(1.25)}
.btm-st.fit-cover .btm-st-vid,.btm-st.fit-cover .btm-st-poster,.btm-st.fit-cover .btm-st-photo{object-fit:cover}
/* optional subtitle (naam ke neeche) */
.btm-st-sub{margin:-2px 0 8px; font-size:13px; line-height:1.35; font-weight:500; color:rgba(244,241,234,.82); text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* ---------- ARTICLE card (Read More) ---------- */
.btm-st-sheet{position:absolute; inset:0; z-index:20; display:flex; align-items:flex-end; justify-content:center}
.btm-st-sheet-bg{position:absolute; inset:0; background:rgba(5,5,8,.62)}
.btm-st-sheet-card{position:relative; width:100%; max-width:640px; height:92%; height:92dvh; background:#0b0b12; border-radius:22px 22px 0 0; border:1px solid rgba(var(--st-rgb),.28); border-bottom:0; box-shadow:0 -18px 50px rgba(0,0,0,.6); overflow:hidden; animation:btmStUp .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes btmStUp{from{transform:translateY(100%)}to{transform:none}}
.btm-st-sheet-x{position:absolute; right:12px; top:12px; z-index:3; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(11,11,18,.72); color:#fff; display:grid; place-items:center; cursor:pointer}
.btm-st-sheet-x svg{width:19px;height:19px}
.btm-st-sheet-body{position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}
.btm-st-sheet-load{padding:80px 20px; text-align:center; color:var(--st-g1); font-size:22px}
.art-hero{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:#15151f}
.art-wrap{padding:20px 20px 8px; font-family:var(--font-sans,Inter,system-ui,sans-serif)}
.art-cat{display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#1a1408; background:var(--st-g2); padding:4px 10px; border-radius:6px; margin-bottom:12px}
.art-title{font-family:var(--font-serif,Fraunces,Georgia,serif); font-weight:700; font-size:clamp(25px,6.4vw,34px); line-height:1.16; letter-spacing:-.4px; margin:0 0 12px; color:#f7f3ea}
.art-meta{font-size:13px; color:rgba(244,241,234,.62); margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1)}
.art-text{color:rgba(244,241,234,.9); font-size:16.5px; line-height:1.72}
.art-text p{margin:0 0 16px}
.art-text h3{font-family:var(--font-serif,Fraunces,Georgia,serif); font-size:22px; line-height:1.25; margin:30px 0 12px; color:var(--st-g1)}
.art-text strong{color:#fff}
.art-text mark{background:linear-gradient(transparent 55%,rgba(var(--st-rgb),.45) 55%); color:#fff; padding:0 2px}
.art-text blockquote{margin:24px 0; padding:4px 0 4px 18px; border-left:3px solid var(--st-g2); font-family:var(--font-serif,Fraunces,Georgia,serif); font-size:20px; line-height:1.5; font-style:italic; color:var(--st-g1)}
.art-text p.hl{padding:14px 16px; background:rgba(var(--st-rgb),.12); border:1px solid rgba(var(--st-rgb),.35); border-radius:12px; color:#fff; font-weight:600}
.art-more{display:inline-flex; margin:12px 0 6px; padding:12px 22px; border-radius:999px; text-decoration:none; font-weight:700; font-size:14px; color:#1a1408; background:linear-gradient(135deg,var(--st-g1),var(--st-g2) 55%,var(--st-g3))}
@media (min-width:900px){ .btm-st-sheet{align-items:center} .btm-st-sheet-card{height:88%; border-radius:22px; border-bottom:1px solid rgba(var(--st-rgb),.28)} }

/* reels: like button (share ke saath) */
.btm-st-like.on{color:#ff5a7a;border-color:rgba(255,90,122,.7);background:rgba(255,90,122,.18)}.btm-st-like.on svg{fill:#ff5a7a;stroke:#ff5a7a}
.btm-st-save.on{color:#E4C586;border-color:rgba(228,197,134,.8);background:rgba(228,197,134,.2)}.btm-st-save.on svg{fill:#E4C586;stroke:#E4C586}