@media (max-width: 1199.98px) {
  .desktop-nav .nav-link { padding-inline: .55rem; font-size: .84rem; }
}

@media (max-width: 991.98px) {
  body.offcanvas-open { overflow: hidden; }
  .site-header { min-height: 64px; }
  /* Push the sticky header below the status bar / notch (viewport-fit=cover). */
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  .offcanvas-backdrop { background: var(--si-backdrop); }
  .offcanvas-backdrop.show { opacity: .48; }
  /* The drawer must never extend behind the browser's bottom UI bar:
     use the dynamic viewport height and keep the last controls above the
     safe area (home indicator / Android bottom toolbar). */
  .mobile-drawer {
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
  }
  .mobile-drawer .offcanvas-header {
    flex-shrink: 0;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  }
  .mobile-drawer .offcanvas-body {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .mobile-drawer .mobile-tools { margin-top: auto; }
}

@media (max-width: 767.98px) {
  .content-section { padding-block: 3.6rem; }
  .universe-texture { background-size: 270px 270px; }
  .universe-symbol { font-size: min(68vw, 340px); }
  .mandala-bg { width: min(130vmin, 760px); height: min(130vmin, 760px); }
  /* Smaller deity on phones so content stays readable; figure sits higher. */
  .god-figure {
    bottom: 10vh;
    width: min(88vw, 400px);
    height: min(52vh, 480px);
    opacity: .94;
    filter: drop-shadow(0 0 34px var(--si-figure-glow, rgba(255,170,60,.5)))
            drop-shadow(0 16px 40px rgba(0,0,0,.5));
  }
  .god-aura { top: 48%; width: min(130vmin, 680px); height: min(130vmin, 680px); }
  .god-rays { top: 48%; width: min(170vmin, 820px); height: min(170vmin, 820px); }
  /* Narrower column fits fewer characters per line, so the hero sentence
     needs more lines to stay whole. Devanagari is the tight case: it sets
     roughly a third fewer characters per line than Latin. */
  .hero h1.hero-headline-dynamic { -webkit-line-clamp: 7; line-clamp: 7; }
}

@media (max-width: 399.98px) {
  .si-container { width: min(calc(100% - 1.2rem), var(--si-content)); }
  .brand strong { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-menu-button, .header-icon { width: 40px; height: 40px; }
  .hero h1 { font-size: 1.5rem; }
  /* The dynamic headline keeps its own compact size; only the generic hero
     title scales down. Allow a further line at this width. */
  .hero h1.hero-headline-dynamic { font-size: 1.05rem; -webkit-line-clamp: 8; line-clamp: 8; }
  .panchang-values { gap: .5rem; padding: .75rem; }
  .panchang-value { min-height: 108px; padding: .72rem; }
  .panchang-meta { grid-template-columns: 1fr; }
}