/* ===========================================================
   Jap Hanuman — mandir inspired devotional website
   Static HTML/CSS/JS polish with saffron, sindoor, gold and stone
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Yatra+One&family=Tiro+Devanagari+Hindi:ital@0;1&family=Cormorant+Garamond:wght@400;500;600;700&family=EB+Garamond:wght@400;500;600&display=swap');

:root{
  --temple-night:#130604;
  --temple-maroon:#2a0d07;
  --temple-red:#5e1c0e;
  --sindoor:#bd3515;
  --saffron:#ef7d1a;
  --flame:#ffad45;
  --gold:#d6a430;
  --gold-soft:#f6dc93;
  --cream:#fff4df;
  --ivory:#fffaf0;
  --text:#351b10;
  --muted:#765941;
  --dark-muted:#d8b48a;
  --shadow:0 18px 42px rgba(38,12,5,.22);
  --shadow-strong:0 28px 70px rgba(19,6,4,.45);
  --glow:0 0 42px rgba(239,125,26,.42);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  min-height:100vh;
  font-family:'EB Garamond', serif;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 8%, rgba(239,125,26,.18), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(214,164,48,.16), transparent 32%),
    linear-gradient(180deg, #fff8eb 0%, var(--cream) 44%, #f1dcc0 100%);
  font-size:18px;
  line-height:1.72;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(94,28,14,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,28,14,.08) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.hi{ font-family:'Tiro Devanagari Hindi', serif; }
.hi-display{ font-family:'Yatra One', 'Tiro Devanagari Hindi', serif; }

h1,h2,h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  color:var(--text);
  letter-spacing:0;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
button{ font:inherit; }

.container{ width:min(1140px, calc(100% - 40px)); margin:0 auto; }

.top-bar{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg, var(--temple-night), var(--temple-red), var(--temple-night));
  color:var(--gold-soft);
  text-align:center;
  font-family:'Tiro Devanagari Hindi', serif;
  font-size:15px;
  letter-spacing:.04em;
  padding:9px 14px;
  border-bottom:1px solid rgba(246,220,147,.22);
}

.top-bar::before,
.top-bar::after{
  content:'';
  position:absolute;
  top:50%;
  width:22%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(246,220,147,.7));
}
.top-bar::before{ left:0; }
.top-bar::after{ right:0; transform:rotate(180deg); }
.top-bar span{ color:#fff0c8; margin:0 10px; }

.navbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,250,240,.9);
  border-bottom:1px solid rgba(151,80,29,.22);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 24px rgba(42,13,7,.08);
}

.nav-inner{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Yatra One', 'Tiro Devanagari Hindi', serif;
  color:var(--temple-red);
  font-size:24px;
  line-height:1;
  white-space:nowrap;
}
.logo .sym{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--gold-soft);
  background:radial-gradient(circle at 35% 30%, var(--flame), var(--sindoor) 58%, var(--temple-maroon));
  box-shadow:0 0 0 3px rgba(214,164,48,.22), 0 8px 18px rgba(189,53,21,.28);
  font-size:18px;
}

.nav-links{ display:flex; align-items:center; gap:8px; }
.nav-links a{
  position:relative;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  color:#4e2918;
  font-family:'Cormorant Garamond', serif;
  font-size:17px;
  font-weight:700;
  transition:color .2s, background .2s, box-shadow .2s;
}
.nav-links a:hover,
.nav-links a.active{
  color:var(--temple-night);
  background:linear-gradient(180deg, rgba(246,220,147,.72), rgba(239,125,26,.18));
  box-shadow:inset 0 0 0 1px rgba(214,164,48,.48);
}

.nav-links .nav-path-link{
  color:#b53012;
  background:rgba(255,250,240,.72);
  border:1px solid rgba(181,48,18,.32);
  font-family:'Tiro Devanagari Hindi', serif;
  font-weight:700;
  box-shadow:0 8px 18px rgba(181,48,18,.08);
}

.nav-links .nav-path-link:hover{
  color:#fff8e8;
  background:linear-gradient(135deg, #b53012, #d65316);
  border-color:rgba(181,48,18,.44);
  box-shadow:0 10px 24px rgba(181,48,18,.2);
}

.nav-language{
  display:flex;
  align-items:center;
  gap:4px;
}

.nav-links .language-link{
  min-height:32px;
  padding:6px 9px;
  border-radius:8px;
  font-size:17px;
}

.nav-links .language-link.is-active{
  color:var(--temple-night);
  background:linear-gradient(180deg, rgba(255,181,72,.72), rgba(239,125,26,.3));
  box-shadow:inset 0 0 0 1px rgba(214,164,48,.5);
}

.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid rgba(94,28,14,.24);
  border-radius:50%;
  background:var(--ivory);
  color:var(--temple-red);
  cursor:pointer;
}

.hero-dark,
.hero-warm{
  position:relative;
  overflow:hidden;
  color:var(--cream);
  background:
    radial-gradient(circle at 76% 24%, rgba(239,125,26,.38), transparent 28%),
    radial-gradient(circle at 16% 78%, rgba(214,164,48,.2), transparent 34%),
    linear-gradient(145deg, var(--temple-night) 0%, var(--temple-maroon) 44%, var(--temple-red) 100%);
}

.hero-warm{
  min-height:calc(100vh - 112px);
  padding:76px 0 54px;
}

.hero-dark{ padding:72px 0 66px; }

.hero-dark::before,
.hero-warm::before{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:170px;
  opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170' viewBox='0 0 260 170'%3E%3Cpath d='M0 170V102c0-29 24-53 53-53s53 24 53 53v68h20V78c0-36 29-65 65-65s65 29 65 65v92h22V94c0-31 25-56 56-56s56 25 56 56v76' fill='none' stroke='%23F6DC93' stroke-width='2'/%3E%3Ccircle cx='191' cy='36' r='6' fill='%23F6DC93' opacity='.75'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:260px 170px;
}

.hero-dark::after,
.hero-warm::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(19,6,4,.78), transparent 42%, rgba(19,6,4,.2)),
    radial-gradient(circle at 50% 110%, rgba(255,173,69,.22), transparent 36%);
}

.hero-dark .container,
.hero-warm .container{ position:relative; z-index:2; }

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:54px;
  align-items:center;
}

.eyebrow-tag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  padding:8px 16px;
  border:1px solid rgba(246,220,147,.45);
  border-radius:999px;
  background:rgba(255,244,223,.08);
  color:var(--gold-soft);
  font-family:'Tiro Devanagari Hindi', serif;
  font-size:14px;
  box-shadow:0 0 28px rgba(239,125,26,.18);
}

.eyebrow-tag::before{ content:'ॐ'; color:var(--flame); }

.hero-title{
  margin-bottom:18px;
  color:var(--gold-soft);
  font-size:clamp(42px, 6vw, 76px);
  line-height:1.08;
  text-shadow:0 0 26px rgba(239,125,26,.48), 0 3px 0 rgba(19,6,4,.2);
}
.hero-dark .hero-title{ font-size:clamp(38px, 5vw, 58px); }

.hero-sub{
  max-width:650px;
  margin-bottom:18px;
  color:#ffeccd;
  font-family:'Tiro Devanagari Hindi', serif;
  font-size:clamp(19px, 2.2vw, 25px);
  line-height:1.85;
}

.hero-doha{
  min-height:3.9em;
  white-space:pre-line;
}

.hero-doha::after{
  content:'';
  display:inline-block;
  width:2px;
  height:1.15em;
  margin-left:4px;
  vertical-align:-.16em;
  background:currentColor;
  animation:cursorBlink .9s steps(1) infinite;
}

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 24px;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  font-family:'Cormorant Garamond', serif;
  font-size:18px;
  font-weight:700;
  line-height:1.1;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:linear-gradient(135deg, var(--flame), var(--saffron) 55%, var(--sindoor));
  color:#220905;
  box-shadow:0 14px 32px rgba(239,125,26,.36), inset 0 1px 0 rgba(255,255,255,.42);
}
.btn-outline{
  border-color:rgba(246,220,147,.6);
  color:var(--gold-soft);
  background:rgba(255,250,240,.07);
}
.btn-outline:hover{ background:rgba(246,220,147,.16); box-shadow:0 10px 26px rgba(0,0,0,.12); }

.hero-frame{
  position:relative;
  display:flex;
  justify-content:center;
  isolation:isolate;
}

.hero-frame::before{
  content:'';
  position:absolute;
  width:min(86%, 460px);
  aspect-ratio:1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,236,191,.98) 0 16%, rgba(255,173,69,.46) 34%, rgba(239,125,26,.14) 58%, transparent 70%);
  filter:blur(1px);
  box-shadow:0 0 80px rgba(239,125,26,.5);
  z-index:-2;
  animation:pulseGlow 5s ease-in-out infinite;
}

.hero-frame::after{
  content:'';
  position:absolute;
  width:min(74%, 390px);
  aspect-ratio:1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(246,220,147,.42);
  box-shadow:inset 0 0 0 16px rgba(246,220,147,.04), 0 0 0 5px rgba(214,164,48,.08);
  z-index:-1;
}

.hero-frame{ padding:16px; }
.hero-portrait{
  position:relative;
  overflow:hidden;
  width:min(100%, 430px);
  aspect-ratio:4/5;
  border:1px solid rgba(246,220,147,.68);
  border-radius:8px;
  background:rgba(255,250,240,.06);
  box-shadow:var(--shadow-strong), 0 0 0 8px rgba(246,220,147,.07);
}
.hero-portrait::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 46%, rgba(19,6,4,.26));
}
.hero-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%;
}

@keyframes pulseGlow{
  0%,100%{ opacity:.74; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
}

@keyframes cursorBlink{
  0%, 45%{ opacity:1; }
  46%, 100%{ opacity:0; }
}

@keyframes sway{
  0%,100%{ transform:rotate(-5deg); }
  50%{ transform:rotate(5deg); }
}

.verse-block{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(214,164,48,.42);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,250,240,.94), rgba(255,244,223,.9)),
    var(--ivory);
  box-shadow:var(--shadow);
}
.verse-block::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg, var(--sindoor), var(--saffron), var(--gold));
}
.quote-strip{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(19,6,4,.98), rgba(94,28,14,.96), rgba(19,6,4,.98));
  color:var(--gold-soft);
  text-align:center;
  padding:48px 24px;
  border-block:1px solid rgba(214,164,48,.42);
}
.quote-strip::before{
  content:'';
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56' viewBox='0 0 120 56'%3E%3Cpath d='M0 56c20 0 20-32 40-32s20 32 40 32 20-32 40-32' fill='none' stroke='%23F6DC93' stroke-width='1'/%3E%3C/svg%3E");
}
.quote-strip p{
  position:relative;
  max-width:900px;
  margin:0 auto;
  font-family:'Tiro Devanagari Hindi', serif;
  font-size:clamp(21px, 3vw, 30px);
  line-height:1.7;
}
.quote-mark{ color:var(--flame); margin:0 8px; }

.section{ padding:72px 0; }
.chalisa-english .verse-block .line{
  font-family:'EB Garamond', serif;
  font-size:22px;
  letter-spacing:0;
}

.verse-block{
  padding:22px 26px;
  margin-bottom:15px;
  transition:border-color .25s, box-shadow .25s, transform .25s, background .25s;
}
.verse-block .num{
  display:inline-flex;
  min-width:34px;
  height:28px;
  align-items:center;
  justify-content:center;
  margin-right:10px;
  border-radius:999px;
  color:var(--temple-red);
  background:rgba(239,125,26,.12);
  font-family:'Cormorant Garamond', serif;
  font-size:14px;
  font-weight:700;
  transition:background .25s, color .25s, box-shadow .25s;
}
.verse-block .line{
  font-family:'Tiro Devanagari Hindi', serif;
  color:var(--text);
  font-size:21px;
  line-height:2;
  transition:color .25s;
}
.verse-block.doha{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  background:linear-gradient(180deg, #f7e4c4, #fff5df);
  border-color:rgba(214,164,48,.72);
}
.verse-block.doha .num{
  margin-right:0;
}
.verse-block.doha .num:empty{
  display:none;
}
.verse-block.doha .line{
  display:block;
  margin:0;
  color:var(--temple-red);
  font-size:22px;
}

.verse-block.is-reading{
  border-color:rgba(239,125,26,.72);
  background:linear-gradient(180deg, #fffaf0, #ffecc2);
  box-shadow:0 18px 38px rgba(198,79,19,.18), 0 0 0 1px rgba(255,173,69,.18);
  transform:translateY(-1px);
}

.verse-block.is-reading .num{
  color:#fff8e8;
  background:linear-gradient(135deg, var(--saffron), var(--sindoor));
  box-shadow:0 8px 18px rgba(239,125,26,.28);
}

.verse-block.is-reading .line{
  color:var(--sindoor);
}

.sundarkand-reader{
  display:grid;
  gap:18px;
}

.sundarkand-block{
  position:relative;
  overflow:hidden;
  padding:30px 32px 28px;
  border:1px solid rgba(211,144,53,.34);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,250,240,.94), rgba(255,242,214,.82));
  box-shadow:0 16px 34px rgba(38,12,5,.12);
  transition:border-color .25s, box-shadow .25s, transform .25s, background .25s;
}

.sundarkand-block::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg, var(--sindoor), var(--saffron), var(--gold));
}

.sundarkand-block-num{
  display:inline-flex;
  min-width:42px;
  height:30px;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  border-radius:999px;
  color:#fff8e8;
  background:linear-gradient(135deg, var(--saffron), var(--sindoor));
  font-family:'Cormorant Garamond', serif;
  font-size:14px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(239,125,26,.24);
}

.sundarkand-block p{
  font-family:'Tiro Devanagari Hindi', serif;
  color:#3f2113;
  font-size:clamp(18px, 2vw, 22px);
  line-height:1.95;
}

.sundarkand-english .sundarkand-block p{
  font-family:'EB Garamond', serif;
  font-size:22px;
  letter-spacing:0;
}

.sundarkand-block p + p{
  margin-top:4px;
}

.sundarkand-meter{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(214,164,48,.28);
  color:var(--sindoor) !important;
  font-weight:700;
}

.sundarkand-meter + p{
  color:var(--sindoor);
  font-weight:700;
}

.sundarkand-block.is-reading{
  border-color:rgba(239,125,26,.72);
  background:linear-gradient(180deg, #fffaf0, #ffecc2);
  box-shadow:0 18px 38px rgba(198,79,19,.18), 0 0 0 1px rgba(255,173,69,.18);
  transform:translateY(-1px);
}

.sundarkand-hero{
  background:
    radial-gradient(circle at 76% 44%, rgba(255,197,93,.56), transparent 28%),
    radial-gradient(circle at 20% 86%, rgba(234,115,24,.2), transparent 30%),
    linear-gradient(180deg, #fff5d9 0%, #ffe7ad 48%, #ffd38a 100%);
}

.chalisa-hero{
  background:
    radial-gradient(circle at 76% 44%, rgba(255,197,93,.58), transparent 28%),
    radial-gradient(circle at 20% 86%, rgba(234,115,24,.22), transparent 30%),
    linear-gradient(180deg, #fff5d9 0%, #ffe7ad 48%, #ffd38a 100%);
}

.sundarkand-hero .hero-grid,
.chalisa-hero .hero-grid{
  min-height:520px;
}

.sundarkand-hero .hero-grid{
  grid-template-columns:minmax(0, .78fr) minmax(280px, .62fr);
}

.sundarkand-hero .hero-sub,
.chalisa-hero .hero-sub{
  max-width:560px;
}

.sundarkand-hero .hero-sub{
  max-width:760px;
}

.sundarkand-hero-actions,
.chalisa-hero-actions{
  margin-top:4px;
}

.sundarkand-hero .btn-outline,
.chalisa-hero .btn-outline{
  color:#681f0f;
  background:rgba(255,250,238,.82);
  border-color:rgba(154,73,18,.42);
  box-shadow:0 10px 24px rgba(128,54,12,.12), inset 0 1px 0 rgba(255,255,255,.8);
}

.sundarkand-hero .hero-frame,
.chalisa-hero .hero-frame{
  justify-content:flex-end;
}

.sundarkand-hero .hero-portrait,
.chalisa-hero .hero-portrait{
  width:min(100%, 420px);
  aspect-ratio:4/5;
  border-color:rgba(255,244,194,.78);
  box-shadow:0 28px 62px rgba(129,58,11,.28), 0 0 0 8px rgba(255,255,255,.2);
}

.sundarkand-hero .hero-portrait img,
.chalisa-hero .hero-portrait img{
  object-position:center 18%;
}

footer{
  position:relative;
  overflow:hidden;
  padding:86px 24px 32px;
  text-align:center;
  color:#e8c391;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(42,9,4,.34), transparent 34%),
    radial-gradient(circle at 50% 24%, rgba(255,181,67,.3), transparent 22%),
    radial-gradient(circle at 18% 0%, rgba(255,129,35,.24), transparent 24%),
    radial-gradient(circle at 82% 0%, rgba(255,129,35,.2), transparent 24%),
    linear-gradient(180deg, #c84616 0%, #8f230d 48%, #4b1007 100%);
  border-top:1px solid rgba(246,220,147,.4);
}
footer::after{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  width:min(920px, 94vw);
  height:64px;
  transform:translateX(-50%);
  z-index:0;
  opacity:.52;
  pointer-events:none;
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(255,210,112,.76) 43% 46%, transparent 46%) 0 0 / 54px 42px repeat-x,
    linear-gradient(225deg, transparent 0 43%, rgba(255,210,112,.76) 43% 46%, transparent 46%) 0 0 / 54px 42px repeat-x,
    radial-gradient(circle at 50% 66%, rgba(255,186,82,.86) 0 4px, transparent 5px) 0 0 / 54px 42px repeat-x;
}
footer > *{
  position:relative;
  z-index:1;
}
footer .foot-om{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin:0 auto 16px;
  border-radius:50%;
  color:#3b0c04;
  background:
    radial-gradient(circle at 34% 28%, #fff4cf 0 14%, #ffba52 42%, #dc6c1c 74%, #8d240c 100%);
  box-shadow:
    0 0 0 6px rgba(75,16,7,.36),
    0 0 0 9px rgba(246,220,147,.1),
    0 0 28px rgba(255,181,67,.42),
    0 14px 28px rgba(42,9,4,.28);
  font-size:27px;
}
footer .foot-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:22px;
  margin:15px 0;
}
footer .foot-links a{
  color:var(--gold-soft);
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
}
footer .foot-links a:hover{ color:#fff4df; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-warm{ min-height:auto; }
  .sundarkand-hero .hero-grid,
  .chalisa-hero .hero-grid{ min-height:0; }
  .sundarkand-hero .hero-frame,
  .chalisa-hero .hero-frame{ justify-content:center; }
  .sundarkand-hero .hero-portrait,
  .chalisa-hero .hero-portrait{ width:min(100%, 360px); }
}

@media (max-width:760px){
  .container{ width:min(100% - 30px, 1140px); }
  .nav-inner{ min-height:66px; }
  .nav-toggle{ display:grid; place-items:center; }
  .nav-links{
    position:absolute;
    inset:100% 0 auto;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 15px 16px;
    background:rgba(255,250,240,.98);
    border-bottom:1px solid rgba(214,164,48,.34);
    box-shadow:0 18px 30px rgba(42,13,7,.14);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ justify-content:center; border-radius:8px; }
  .nav-language{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    margin:8px 0 0;
    padding:10px 0 0;
    border-left:0;
    border-top:1px solid rgba(94,28,14,.16);
  }
  .top-bar::before,
  .top-bar::after{ display:none; }
  .hero-warm,
  .hero-dark{ padding:54px 0 46px; }
  .btn{ width:100%; }
}

@media (max-width:600px){
  body{ font-size:17px; }
  .verse-block{ padding:20px 18px; }
  .verse-block .line{ font-size:19px; }
  .verse-block.doha .line{ font-size:20px; }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* ===========================================================
   Saffron mandir direction inspired by the supplied reference
   =========================================================== */

body{
  background:
    radial-gradient(circle at 22% 8%, rgba(255,185,70,.22), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(219,86,28,.14), transparent 34%),
    linear-gradient(180deg, #fff8ea 0%, #fff1d2 52%, #f7d598 100%);
}

.top-bar{
  background:linear-gradient(90deg, #6b1b0a, #c34a16, #6b1b0a);
  color:#fff1c8;
}

.navbar,
.navbar-warm{
  background:rgba(255,248,232,.95);
  border-bottom:1px solid rgba(206,128,32,.25);
}

.hero-warm,
.hero-dark{
  background:
    radial-gradient(circle at 70% 48%, rgba(255,197,93,.55), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(234,115,24,.24), transparent 28%),
    linear-gradient(180deg, #fff4d5 0%, #ffe6ad 48%, #ffd487 100%);
  color:#5c1c0d;
}

.hero-warm{
  min-height:auto;
  padding:76px 0 0;
}

.hero-dark{
  padding:70px 0 58px;
}

.hero-warm::before,
.hero-dark::before{
  height:240px;
  opacity:.4;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(196,74,20,.09) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240'%3E%3Cg fill='none' stroke='%23C34A16' stroke-width='2' opacity='.34'%3E%3Cpath d='M24 240V132h96v108M45 132c0-36 27-65 27-65s27 29 27 65M71 67V40M61 46h22M206 240V112h116v128M230 112c0-42 34-76 34-76s34 34 34 76M264 36V14M252 22h24'/%3E%3Cpath d='M0 240h360'/%3E%3C/g%3E%3C/svg%3E");
  background-size:360px 240px;
  background-repeat:repeat-x;
}

.hero-warm::after,
.hero-dark::after{
  background:
    radial-gradient(circle at 73% 48%, rgba(255,255,255,.26), transparent 22%),
    linear-gradient(90deg, rgba(255,246,219,.86), rgba(255,232,179,.35) 46%, rgba(255,202,108,.18));
}

.hero-warm .hero-title,
.hero-dark .hero-title{
  color:#b53012;
  text-shadow:0 3px 0 rgba(255,255,255,.42), 0 14px 30px rgba(198,79,19,.18);
}

.hero-warm .hero-sub,
.hero-dark .hero-sub{
  color:#4f2112;
  font-weight:600;
}

.hero-warm .eyebrow-tag,
.hero-dark .eyebrow-tag{
  color:#8d3215;
  background:rgba(255,255,255,.48);
  border-color:rgba(180,90,20,.34);
  box-shadow:0 10px 30px rgba(185,91,18,.12);
}

.hero-warm .btn-outline{
  color:#681f0f;
  background:rgba(255,250,238,.82);
  border-color:rgba(154,73,18,.42);
  box-shadow:0 10px 24px rgba(128,54,12,.12), inset 0 1px 0 rgba(255,255,255,.8);
}

.hero-warm .btn-outline:hover{
  color:#431005;
  background:#fff7e6;
  border-color:rgba(154,73,18,.6);
}

.hero-warm .diya-decor,
.hero-dark .diya-decor{
  position:absolute;
  inset:0 0 auto;
  z-index:4;
  pointer-events:none;
}

.hero-warm .bell,
.hero-dark .bell{
  position:absolute;
  top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform-origin:top center;
  animation:sway 3.6s ease-in-out infinite;
}

.hero-warm .bell.left,
.hero-dark .bell.left{ left:34px; }

.hero-warm .bell.right,
.hero-dark .bell.right{ right:34px; animation-delay:.55s; }

.hero-warm .bell .thread,
.hero-dark .bell .thread{
  width:1px;
  height:78px;
  background:linear-gradient(#a95813, rgba(169,88,19,.2));
}

.hero-warm .bell .body,
.hero-dark .bell .body{
  font-size:25px;
  filter:drop-shadow(0 4px 8px rgba(129,58,11,.24));
}

.verse-block{
  background:rgba(255,253,246,.9);
  border-color:rgba(211,144,53,.34);
  box-shadow:0 16px 34px rgba(156,83,19,.14);
}

.verse-block::before{
  background:linear-gradient(90deg, #e65a1c, #ffad45, #f2d47a);
}

.quote-strip{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,181,67,.22), transparent 32%),
    linear-gradient(90deg, #fff2cf, #ffe2a8, #fff2cf);
  color:#7d2d14;
  border-block-color:rgba(204,125,31,.28);
}

.quote-strip p{ color:#8d3215; }

footer{
  background:
    radial-gradient(ellipse at 50% 58%, rgba(42,9,4,.34), transparent 34%),
    radial-gradient(circle at 50% 24%, rgba(255,181,67,.3), transparent 22%),
    radial-gradient(circle at 18% 0%, rgba(255,129,35,.24), transparent 24%),
    radial-gradient(circle at 82% 0%, rgba(255,129,35,.2), transparent 24%),
    linear-gradient(180deg, #c84616 0%, #8f230d 48%, #4b1007 100%);
}

@media (max-width:760px){
  footer{
    padding-top:82px;
  }

  footer::after{
    width:118vw;
  }

  .hero-warm,
  .hero-dark{
    padding:48px 0 0;
  }

  .hero-warm .bell.left,
  .hero-dark .bell.left{ left:14px; }

  .hero-warm .bell.right,
  .hero-dark .bell.right{ right:14px; }

  .hero-warm .bell .thread,
  .hero-dark .bell .thread{ height:54px; }
}

.hero-warm{
  background:
    linear-gradient(90deg, rgba(255,248,229,.96) 0%, rgba(255,244,214,.88) 34%, rgba(255,228,170,.44) 58%, rgba(255,218,139,.16) 100%),
    url('../images/jap-hanuman-hero-bg.jpg') center right / cover no-repeat;
}

.sundarkand-hero{
  background:
    linear-gradient(90deg, rgba(255,248,229,.96) 0%, rgba(255,244,214,.88) 34%, rgba(255,228,170,.44) 58%, rgba(255,218,139,.16) 100%),
    url('../images/jap-hanuman-hero-bg.jpg') center right / cover no-repeat;
}

.hero-warm::before{
  opacity:.1;
}

.hero-warm::after{
  background:
    radial-gradient(circle at 26% 48%, rgba(255,255,255,.24), transparent 30%),
    linear-gradient(90deg, rgba(255,249,232,.5), transparent 62%);
}

.hero-warm .diya-decor{
  display:none;
}

.sundarkand-hero .diya-decor,
.sundarkand-hero .hero-frame{
  display:none;
}

.hero-warm .hero-grid{
  grid-template-columns:minmax(320px, .92fr) minmax(320px, 1.08fr);
  min-height:520px;
}

.sundarkand-hero .hero-grid{
  grid-template-columns:minmax(320px, .92fr) minmax(320px, 1.08fr);
  min-height:520px;
}

@media (max-width:900px){
  .hero-warm{
    background:
      linear-gradient(180deg, rgba(255,248,229,.96) 0%, rgba(255,241,207,.84) 46%, rgba(255,224,159,.62) 100%),
      url('../images/jap-hanuman-hero-bg.jpg') 68% center / cover no-repeat;
  }

  .sundarkand-hero{
    background:
      linear-gradient(180deg, rgba(255,248,229,.96) 0%, rgba(255,241,207,.84) 46%, rgba(255,224,159,.62) 100%),
      url('../images/jap-hanuman-hero-bg.jpg') 68% center / cover no-repeat;
  }

  .hero-warm .hero-grid,
  .sundarkand-hero .hero-grid{
    min-height:0;
  }
}

@media (max-width:600px){
  .hero-warm{
    background:
      linear-gradient(180deg, rgba(255,248,229,.98) 0%, rgba(255,241,207,.93) 52%, rgba(255,224,159,.72) 100%),
      url('../images/jap-hanuman-hero-bg.jpg') 72% center / cover no-repeat;
  }

  .sundarkand-hero{
    background:
      linear-gradient(180deg, rgba(255,248,229,.98) 0%, rgba(255,241,207,.93) 52%, rgba(255,224,159,.72) 100%),
      url('../images/jap-hanuman-hero-bg.jpg') 72% center / cover no-repeat;
  }
}

@media (max-width:760px){
  .sundarkand-hero,
  .chalisa-hero{
    padding-bottom:44px;
  }
}

.chalisa-section{
  scroll-margin-top:92px;
  background:
    radial-gradient(circle at 12% 4%, rgba(255,174,66,.18), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(189,53,21,.12), transparent 34%),
    linear-gradient(180deg, #fff8ea 0%, #fff1d6 100%);
}

@media (max-width:900px){
  .sundarkand-hero{
    min-height:auto;
    padding:44px 0 36px;
  }

  .sundarkand-hero .hero-grid{
    grid-template-columns:1fr;
    gap:28px;
    min-height:0;
    align-items:start;
  }

  .sundarkand-hero .hero-frame{
    min-height:0;
    justify-content:center;
  }

  .sundarkand-hero .hero-portrait{
    width:min(100%, 420px);
    min-height:0;
    aspect-ratio:4/5;
  }
}

@media (max-width:600px){
  .sundarkand-hero{
    padding:30px 0 28px;
  }

  .sundarkand-hero .hero-grid{
    gap:22px;
  }

  .sundarkand-hero .eyebrow-tag{
    margin-bottom:14px;
    font-size:13px;
  }

  .sundarkand-hero .hero-title{
    font-size:clamp(38px, 14vw, 58px);
    margin-bottom:12px;
  }

  .sundarkand-hero .hero-sub{
    font-size:clamp(18px, 5.4vw, 24px);
    line-height:1.65;
    margin-bottom:16px;
  }

  .sundarkand-hero .hero-portrait{
    width:min(100%, 340px);
  }

  .sundarkand-block{
    padding:22px 18px;
  }

  .sundarkand-block p,
  .sundarkand-english .sundarkand-block p{
    font-size:19px;
    line-height:1.85;
  }
}