/* -----------------------------
   STORY PAGE TYPOGRAPHY UPDATE
------------------------------ */

/* English text + headings */
body.lang-en,
.story-text p,
.story-text,
.story-heading {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    line-height: 1.85;
}

/* Local languages (keep current Noto Sans) */
body.lang-ml { font-family: 'Noto Sans Malayalam', sans-serif; line-height: 1.95; letter-spacing: 0; }
body.lang-ta { font-family: 'Noto Sans Tamil', sans-serif; line-height: 1.95; letter-spacing: 0; }
body.lang-te { font-family: 'Noto Sans Telugu', sans-serif; line-height: 1.95; letter-spacing: 0; }
body.lang-kn { font-family: 'Noto Sans Kannada', sans-serif; line-height: 1.95; letter-spacing: 0; }
body.lang-hi,
body.lang-mr { font-family: 'Noto Sans Devanagari', sans-serif; line-height: 1.95; letter-spacing: 0; }


/* =========================
   STORY PAGE TYPOGRAPHY
========================= */
.story-heading {
  font-family: 'Montserrat', 'Karla', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #e67e22;
  letter-spacing: 1px;
  text-align: center;

  /* subtle divine glow */
  text-shadow:
    0 2px 6px rgba(0,0,0,0.15),
    0 0 12px rgba(230,126,34,0.35);
}

/* =========================
   STORY ROWS + FADE-IN
========================= */
.story-row {
  display: flex;
  align-items: stretch;
  gap: 32px;
  margin-bottom: 40px;

  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.story-row.reverse {
  flex-direction: row-reverse;
}

.story-row.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   TEXT BLOCK
========================= */
.story-text {
  flex: 1;
  display: flex;
  align-items: flex-start;

  font-family: 'Karla', 'Noto Sans Malayalam', 'Noto Sans Tamil',
               'Noto Sans Telugu', 'Noto Sans Kannada',
               'Noto Sans Devanagari', sans-serif;

  font-size: 1.35rem;
  line-height: 1.9;
  color: #2c2c2c;
}

/* IMPORTANT — actual text styling */
.story-text p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;

  /* readability enhancements */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.2px;
  word-spacing: 1px;

  animation: textFade 0.6s ease forwards;
}

/* paragraph fade */
@keyframes textFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* OPTIONAL DROP CAP (safe default) */
.story-text p:first-letter {
  font-size: 2.8rem;
  font-weight: 700;
  float: left;
  line-height: 1;
  padding-right: 8px;
  color: #d35400;
}

/* Disable drop-cap for Indian scripts */
.lang-te .story-text p:first-letter,
.lang-ta .story-text p:first-letter,
.lang-ml .story-text p:first-letter,
.lang-kn .story-text p:first-letter,
.lang-hi .story-text p:first-letter,
.lang-mr .story-text p:first-letter {
  float: none;
  font-size: inherit;
  padding: 0;
}

/* =========================
   IMAGE BLOCK
========================= */
.story-img {
  flex: 1;
  display: flex;
  align-items: center;

  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* Image */
.story-img img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;

  border-radius: 18px;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  box-shadow: 0 0 25px rgba(0,0,0,0.18);
}

/* Hover */
.story-img img:hover {
  transform: scale(1.04);
  box-shadow: 0 0 35px rgba(0,0,0,0.35);
}

/* =========================
   ORIGINAL SMOKY BLUR (EDGES ONLY)
========================= */
.story-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(to top,    rgba(255,255,255,0.65), transparent 10%),
    linear-gradient(to bottom, rgba(255,255,255,0.65), transparent 10%),
    linear-gradient(to left,   rgba(255,255,255,0.65), transparent 10%),
    linear-gradient(to right,  rgba(255,255,255,0.65), transparent 10%);

  mix-blend-mode: screen;
}

/* =========================
   CTA
========================= */
.story-cta p {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

/* =========================
   MOBILE POLISH
========================= */
@media (max-width: 768px) {
  .story-row,
  .story-row.reverse {
    flex-direction: column;
  }

  .story-text {
    font-size: 1.1rem;
  }

  .story-img img {
    max-height: 280px;
  }
}

/* =========================
   READ LIKE A BOOK MODE
========================= */
.book-mode .story-row {
  max-width: 820px;
  margin: 0 auto 48px;
}

.book-mode .story-text {
  font-family: 'Georgia', serif;
  font-size: 1.25rem;
  line-height: 2.1;
}

.book-mode .story-text p {
  letter-spacing: 0.3px;
}

/* Toggle button */
.book-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #7a4a1f;
  color: #fff;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  z-index: 999;
}