/* ================================================================
   LOG KYA KAHENGE — vintage Bollywood poster meets shaadi-card gold
   ================================================================ */

:root {
  --plum:      #1B0A2A;
  --plum-2:    #2C1043;
  --plum-3:    #3a1657;
  --marigold:  #FF9E19;
  --marigold-2:#FFC23D;
  --pink:      #FF2E7E;
  --sindoor:   #C21B2B;
  --gold:      #F3C14A;
  --gold-deep: #B8862B;
  --teal:      #12B0A6;
  --cream:     #FBEEDA;
  --cream-2:   #F4E0BC;
  --ink:       #2A150B;

  --ff-display: 'Yatra One', 'Georgia', serif;
  --ff-body: 'Mukta', system-ui, -apple-system, sans-serif;
  --ff-mono: 'Space Mono', ui-monospace, monospace;

  --shadow-poster: 0 24px 60px -18px rgba(0,0,0,.65);
  --r: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* Don't let mobile browsers auto-inflate text on rotate — keeps the layout app-stable */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
body {
  font-family: var(--ff-body);
  color: var(--cream);
  background: var(--plum);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  /* Kills the 300ms double-tap-zoom delay. (Pinch-zoom is blocked by the viewport meta on
     Android + iOS-standalone, and by the gesture guard in the app pages for iOS Safari tabs.) */
  touch-action: manipulation;
}

/* Deep cinema backdrop with a faint radial spotlight */
body.stage {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--plum-3) 0%, var(--plum-2) 38%, var(--plum) 78%);
  background-attachment: fixed;
}

h1,h2,h3 { font-family: var(--ff-display); font-weight: 400; line-height: 1.02; margin: 0; }
a { color: var(--marigold-2); }

/* ---- Devanagari-flavored brush title with sindoor drop shadow ---- */
.filmi {
  font-family: var(--ff-display);
  color: var(--marigold-2);
  text-shadow: 0 2px 0 var(--sindoor), 0 3px 0 rgba(0,0,0,.25), 0 0 26px rgba(255,158,25,.35);
  letter-spacing: .5px;
}

/* ---- Sunburst backdrop for hero titles ---- */
/* overflow:clip contains the oversized, rotating ::before so it can't create
   phantom scrollable area below the fold (it did — ~600px of empty scroll). */
.sunburst { position: relative; isolation: isolate; overflow: clip; }
.sunburst::before {
  content: "";
  position: absolute; inset: -40% -20%;
  z-index: -1;
  background: repeating-conic-gradient(
    from 0deg at 50% 45%,
    rgba(255,158,25,.16) 0deg 7deg,
    transparent 7deg 14deg);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 72%);
          mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 72%);
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Gold poster frame ---- */
.poster {
  position: relative;
  border: 3px solid var(--gold);
  border-radius: var(--r);
  box-shadow: var(--shadow-poster), inset 0 0 0 1px rgba(243,193,74,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)),
    var(--plum-2);
}
.poster::after { /* thin inner keyline */
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(243,193,74,.45); border-radius: calc(var(--r) - 6px);
  pointer-events: none;
}

/* ---- Marigold garland (genda phool) strip ---- */
.garland {
  height: 22px; width: 100%;
  background:
    radial-gradient(circle at 12px 4px, var(--marigold-2) 6px, transparent 7px),
    radial-gradient(circle at 12px 4px, var(--marigold) 8px, transparent 9px);
  background-size: 24px 22px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.3));
  opacity: .95;
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--ff-body); font-weight: 700; font-size: 1.05rem;
  color: var(--ink);
  background: linear-gradient(180deg, var(--marigold-2), var(--marigold));
  border: none; border-radius: 999px;
  padding: 14px 26px; cursor: pointer;
  box-shadow: 0 6px 0 var(--gold-deep), 0 12px 22px -8px rgba(0,0,0,.6);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  letter-spacing: .3px;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-deep), 0 6px 12px -8px rgba(0,0,0,.6); }
.btn:disabled { filter: grayscale(.5) brightness(.8); cursor: not-allowed; box-shadow: 0 6px 0 var(--gold-deep); }
.btn.ghost {
  background: transparent; color: var(--marigold-2);
  border: 2px solid var(--gold); box-shadow: none; padding: 10px 20px;
}
.btn.ghost:active { transform: translateY(2px); }
.btn.pink { background: linear-gradient(180deg, #ff5c9a, var(--pink)); color: #fff; box-shadow: 0 6px 0 #9c0f4c, 0 12px 22px -8px rgba(0,0,0,.6); }
.btn.teal { background: linear-gradient(180deg, #23d0c4, var(--teal)); color: #04302d; box-shadow: 0 6px 0 #0a6b64; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Chips / eyebrows ---- */
.eyebrow {
  font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .28em;
  font-size: .72rem; color: var(--marigold-2); opacity: .9;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(243,193,74,.5); color: var(--cream);
  background: rgba(0,0,0,.25);
}
.chip.spice-clean  { border-color: var(--teal); color: #9ef4ec; }
.chip.spice-cheeky { border-color: var(--marigold); color: var(--marigold-2); }
.chip.spice-masala { border-color: var(--pink); color: #ff8bb7; }

/* ---- Utility ---- */
.wrap { max-width: 1100px; margin: 0 auto; padding: clamp(16px, 3vw, 40px); }
.center { text-align: center; }
.muted { color: rgba(251,238,218,.62); }
.hidden { display: none !important; }
.stack { display: grid; gap: 16px; }

/* ================================================================
   Motion
   ================================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.enter { animation: rise .5s cubic-bezier(.2,.9,.25,1) both; }
@keyframes pop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .4s cubic-bezier(.2,1.3,.4,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================================================================
   Blog / article pages
   ================================================================ */
.doc { max-width: 820px; margin: 0 auto; padding: clamp(20px,4vw,56px) 20px 80px; }
.doc .backlink { display:inline-block; margin-bottom: 12px; font-family: var(--ff-mono);
  font-size:.8rem; letter-spacing:.08em; }

.article-head { margin-bottom: 8px; }
.article-head .kicker { font-family: var(--ff-mono); text-transform: uppercase;
  letter-spacing:.2em; font-size:.72rem; color: var(--marigold-2); }
.article-head h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); color: var(--marigold-2);
  text-shadow: 0 2px 0 var(--sindoor); margin-top: 8px; }
.article-head .standfirst { font-size: 1.2rem; line-height:1.5;
  color: rgba(251,238,218,.9); margin-top: 14px; max-width: 60ch; }
.byline { margin-top: 14px; font-family: var(--ff-mono); font-size:.74rem;
  letter-spacing:.06em; color: rgba(251,238,218,.6); }

.article-body { font-size: 1.08rem; line-height: 1.68; color: rgba(251,238,218,.9); }
.article-body h2 { font-size: clamp(1.5rem,3.6vw,2.1rem); color: var(--marigold-2); margin: 40px 0 0; }
.article-body h3 { font-size: 1.3rem; color: var(--cream); margin: 28px 0 0; }
.article-body p { margin: 14px 0 0; }
.article-body ul, .article-body ol { margin: 14px 0 0; padding-left: 22px; }
.article-body li { margin: 8px 0 0; }
.article-body blockquote { border-left: 4px solid var(--pink); margin: 22px 0; padding: 6px 18px;
  color: var(--marigold-2); font-family: var(--ff-display); font-size: 1.4rem; }
.article-body a { color: var(--marigold-2); text-decoration: underline; text-underline-offset: 3px; }

.dialogue { background: rgba(0,0,0,.22); border: 1px solid rgba(243,193,74,.32);
  border-radius: 12px; padding: 12px 16px; margin: 14px 0 0; }
.dialogue .src { display:block; font-family: var(--ff-mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--gold-deep); margin-top: 6px; }

.article-cta { margin-top: 40px; text-align:center; }
.related { margin-top: 44px; padding-top: 18px; border-top: 1px dashed rgba(184,134,43,.4); }
.related h2 { font-size: 1.2rem; color: var(--marigold-2); }
.related a { display:inline-block; margin-top: 8px; }

.docfoot { margin-top: 48px; padding-top: 18px; border-top: 1px dashed rgba(184,134,43,.4);
  text-align:center; font-family: var(--ff-mono); font-size:.8rem; letter-spacing:.04em;
  color: rgba(251,238,218,.7); }
.docfoot a { color: var(--marigold-2); }

/* Blog hub */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-top: 26px; }
.hub-card { display:block; text-decoration:none; color: inherit; background: rgba(0,0,0,.22);
  border: 1px solid rgba(243,193,74,.32); border-radius: 16px; padding: 22px;
  transition: transform .14s ease, border-color .14s ease; }
.hub-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.hub-card .cat { font-family: var(--ff-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--marigold-2); }
.hub-card h2 { font-size: 1.5rem; color: var(--cream); margin-top: 8px; }
.hub-card p { margin-top: 8px; color: rgba(251,238,218,.82); line-height:1.5; }