#ramayana-root{overflow:clip}
#ramayana-root .jwram-announcement{display:flex;align-items:center;justify-content:center;min-height:32px;padding:0 15px;background:#223f99;color:#fff;font:400 10px/1.4 'Jewell Colfax',Arial,sans-serif;letter-spacing:.75px;text-align:center}
#ramayana-root .jwram-announcement a{color:#fff;font-size:12px;text-decoration:none}
#ramayana-root .jwram-announcement a:hover{text-decoration:underline;text-underline-offset:4px}
#ramayana-root .hero{height:auto;max-height:none;min-height:clamp(600px,calc(100svh - 110px),760px);padding:70px 0;overflow:hidden}
#ramayana-root .hero-content{width:min(660px,58%);margin-left:clamp(28px,7vw,110px);padding-top:0}
#ramayana-root .hero-image{animation:jwram-breathe 18s ease-in-out infinite alternate;transform-origin:center}
@keyframes jwram-breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
#ramayana-root .hero h1{font-size:clamp(48px,5.5vw,82px);line-height:1.03;letter-spacing:-.045em;overflow-wrap:anywhere}
#ramayana-root .hero-deck{font-size:clamp(16px,1.35vw,19px);line-height:1.6;margin:22px 0 26px}
#ramayana-root .section-pad{padding:clamp(64px,6vw,94px) clamp(28px,7vw,110px)}
#ramayana-root .versus{padding:clamp(64px,6vw,94px) clamp(28px,7vw,110px)}
#ramayana-root > section h2{font-size:clamp(36px,4.5vw,64px);line-height:1.08;overflow-wrap:anywhere}
#ramayana-root .section-heading{gap:clamp(20px,4vw,55px);margin-bottom:clamp(28px,3.5vw,46px)}
#ramayana-root .decoder-grid{gap:clamp(28px,5vw,70px)}
#ramayana-root .intro-note{margin-top:24px}
#ramayana-root .world-row{padding:28px 0}
#ramayana-root .jwram-source-text{color:inherit}
#ramayana-root .world-main .jwram-source-text{display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.08em}
#ramayana-root :is(.character,.universe-card,.world-row,.decoder-tab,.text-action,.primary-btn,.friends-share){transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease}
#ramayana-root .jwram-arrived{animation:jwram-arrive .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes jwram-arrive{from{opacity:.82;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){
  #ramayana-root :is(.character,.universe-card):hover{transform:translateY(-5px);box-shadow:0 20px 40px #060d2029}
  #ramayana-root .world-row:hover{border-color:#e8c77f;transform:translateX(4px)}
  #ramayana-root .decoder-tab:hover{background:#efe5d7}
  #ramayana-root :is(.text-action,.primary-btn,.friends-share):hover{transform:translateY(-2px)}
}
@media(max-width:850px){
  #ramayana-root .hero-content{width:min(660px,76%);margin-left:7vw}
  #ramayana-root .section-pad,#ramayana-root .versus{padding:64px 7vw}
  #ramayana-root .section-heading{margin-bottom:30px}
}
@media(max-width:600px){
  #ramayana-root .jwram-announcement{min-height:44px}
  #ramayana-root .jwram-announcement span{display:none}
  #ramayana-root .hero{min-height:600px;height:auto;max-height:none;align-items:center;padding:70px 0 88px}
  #ramayana-root .hero-content{width:auto;margin:0 6vw;padding:0}
  #ramayana-root .hero h1{font-size:clamp(42px,11vw,58px);line-height:1.04}
  #ramayana-root .hero-deck{font-size:16px;line-height:1.55;margin:20px 0 24px}
  #ramayana-root .hero-image{background-size:cover;background-position:70% center}
  #ramayana-root .hero-wash{background:linear-gradient(90deg,rgba(8,14,27,.92),rgba(8,14,27,.65)),linear-gradient(0deg,rgba(8,14,27,.9),transparent 60%)}
  #ramayana-root .section-pad,#ramayana-root .versus{padding:48px 6vw}
  #ramayana-root > section h2{font-size:clamp(34px,9vw,48px);line-height:1.1}
  #ramayana-root .decoder-grid{gap:26px}
  #ramayana-root .character-photo{min-height:300px}
  #ramayana-root .character-copy{padding:24px 20px}
  #ramayana-root .world-row{padding:23px 0}
}
@media(prefers-reduced-motion:reduce){
  #ramayana-root :is(.hero-image,.jwram-arrived,.character,.universe-card,.world-row,.decoder-tab,.text-action,.primary-btn,.friends-share){animation:none!important;transition:none!important;transform:none!important}
}